重要🤓webpack性能优化

1. webpack优化打包构建速度-开发体验和效率

优化babel-loader
缓存：cacheDirectory,只要加了这个，es6代码中没有改动的就不会重新编译，集中缓存，加快速度。
IgnorePlugin 避免引入无用模块
比如有个Moment.js库支持很多语言

避免引入过多的语言，动态引入。
noParse 避免重复打包
比如xxx.min.js之类的文件是已经用模块化处理过的，不用我们再去打包一次。
happyPack 多进程打包
JS单线程，开启多进程打包
提高构建速度（特别是多核CPU）happyPack可以放到common也可以放到dev当中。
ParellelUglifyPlugin 多进程压缩JS
只能放到生产环境下prod.

关于开启多进程 - 为什么不能直接用happyPack或者Uglify 要按需使用。
自动刷新（只在开发环境用）
变量更新，保存之后，网页全部刷新，状态会丢失，速度比较慢。

用不太到。只要引用了devServer会默认开启用自动更新。
热更新
新代码生效，网页不刷新，状态不丢失。（体验是好，但是成本变高了）
在devServer里面加一条hot: true

module.hot 注册监听热更新范围
DllPlugin 动态链接库插件
思路：先提前打包好，我们再去使用它。
背景：

怎么去用这两个插件？
单独配置一个webpack.dll.js文件👇

第一个插件：产出dist目录下的react.dll.js（内容）和react.manifest.json（索引）。
第二个人插件：第一步引入插件src=...dll.js，第二步exclude: /node_modules/不要再转换已经打包过的代码，第三步告诉webpack索引在哪个地方，根据索引找对应位置。
先引用:

原代码中怎么写还是怎么写。
总结：
可用于生产环境的：优化babel-loader(include exclude)，IgnorePlugin，noParse，happyPack，ParallelUglifyPlugin
不可用于生产环境的：自动刷新，热更新，DllPlugin(只适用于开发环境打包速度的优化)

2. 优化产出代码-产品性能

小图片base64编码
bundle + 哈希
懒加载（异步加载）
提取公共代码
IgnorePlugin(自己手动引用)
使用 CDN 加速
配置CDN域名前缀，然后打包会生成结果。第二步把生成的JS文件、CSS文件等静态资源上传到CDN上使之可被访问到。
使用production
mode: production 生产环境。
好处：可以自动压缩代码，如果嫌弃压缩太慢，开启ParallelUglifyPlugin; Vue/React等会自动删掉调试代码（如开发环境的warning）；
启动Tree-Shaking(没有用到的代码删掉了，（比如一个函数压根没有调用）加载更快，执行更快).
ES6 module才能让tree-shaking生效，commonjs不行。 为什么呢？👇

Tree-Shaking 在webpack打包情况下执行，webpack打包的时候代码还没有执行，只是一个静态分析、编译。Commonjs是动态引入，执行代码的时候引入导致执行到这个时候没有引入但是不敢删掉啊，因为谁知道待会儿会不会引入用到呢？tree-shaking没法工作。
使用Scope Hosting

打包后：

原代码有两个文件，对应两个函数。一个函数会产生一个作用域，文件一多会很复杂。
把多个文件合并到一个函数里：👇

如何配置？---引用插件，开启插件。要优先采用ES6模块化语法

总结：