为什么要优化？
随着项目涉及到的页面越来越多，功能和业务代码也会越来越多，相应的webpack构建时间也会越来越久，所以要考虑优化问题。
一.优化webpack构建速度
1.使用高版本的webpack和node
- webpack4的构建速度比webpack3构建速度有将近40%提升
- v8的优化措施有：for of代替forEach、Map和Set替代Object、includes替代indexOf
- webpack4中使用更快的md4 hash算法替代md5
2.多进程/多实例构建
- 使用thread-loader解析资源，webpack4提供的，原理是通过每次webpack解析一个模块，thread-loader将它及它的依赖分配给worker线程实现多线程构建
3.并行压缩
- 使用parallel-uglify-plugin插件
- 使用uglifyjs-webpack-plugin开启parallel参数
- 使用terser-webpack-plugin开启parallel参数（推荐）
4.分包
- 设置Externals：通过将vue,UI库等基础包通过CDN方式引入，不打入到bundle中，实现基础库的分离
- 预编译资源模块：DLLPlugin + DLLReferencePlugin(推荐)：通过将vue，UI库等基础包和业务 包打包成一个文件。其中DLLPlugin通过将多个基础包或业务基础包提取，并生成一个包文件和manifest.json（对分离包的描述），然后在实际应用中可以借助DLLReferencePlugin对manifest.json引用可以实现分离包的关联。
5.缓存
开启构建项目时候的缓存可以提升二次构建的速度。
- 可以通过label-loader开启缓存，则下次进行babel转换js、jsx语法时直接读取缓存的内容
- 代码压缩阶段可以使用UglifyJsPlugin或TerserWebpackPlugin开启缓存
- 通过cache-loader或者hard-source-webpack-plugin可以提升模块转换阶段的缓存
6.缩小构建目标
- 少构建模块：对于一些第三方的模块，我们可以不需要进行一步的解析，比如babel-loader可以不用解析node_modules的一些例如UI库等一些第三方包
- 减少文件搜索范围：优化resolve.modules配置，减少模块搜索层级；优化resolve.mainFields配置，优化入口配置；优化resolve.extensions配置，优化查找文件对于的后缀；合理使用alias等。
- exclude/include:确定loader规则范围
参考文章：pcaaron.github.io/pages/fe/we…
二.优化webpack构建体积
1.删除无效的css
- PurifyCss:遍历代码，识别已经用到的css class,通过对用到和没有用到的calss标记
2.图片压缩
- 通过image-webpack-loader
