webpack性能优化
webpack性能优化主要分为两个方面：
开发环境性能优化
生产环境性能优化
开发环境性能优化
优化打包构建速度
HMR:模块热替换，若一个文件发生改变则只会重新构建该文件而不会整体文件再构建，提高打包构建速度
优化代码调试
source-map:源代码到构建后代码映射的一个技术
inline-source-map,eval-source-map内联 开发常用内联模式
hidden-source-map,nosources隐藏源代码信息 生产多用外联模式
生产环境性能优化
优化打包构建速度
oneOf:
假如配置多个loader时，匹配到对应的loader就不会再进行往下查找,若一个文件需要loader比如eslint和babel，则需要把eslint放在oneof外面
babel缓存:
开启缓存后，运行结果会保存起来，第二次打包会更快一点
多进程打包:
默认是单进程打包，开启多进程打包后可以一次干多种事情
externals:
用cdn
dll:
先把库打包好，在引用
优化代码运行的性能
hash-chunkhash-contenthash：
缓存，一旦哈希值变则会重新生成文件，若不变则直接走缓存，hash指的是webpack打包后唯一生成的哈希值，chunkhash指的是若打包是来自于一个入口就等于一个同样的chunk，共享同一个哈希值，content-hash根据文件内容生成hash，若文件内容不变则哈希值不会变
tree-shaking:
去除用户中无用的代码
必须开启ES6模块化
将mode写成production则会默认开启tree-shaking，压缩代码
在package.json可以写sideEffect:[xx]，防止删除一些要用的代码
code split:
单页面的js太大进行代码分割
下面为设置的三种方式
- 设置多入口
- 设置optimization
- 通过import语法
在index.js文件设置
lazy-load:
懒加载/预加载（js代码懒加载）
pwa:
离线可访问技术，由serviceworker和cache组成，主要作用在网站离线的时候也可以用，用户体验更好，兼容性问题有点大
