上一篇，总结了 webpack4.0 进阶，其中包括：
- px 自动转rem
- Tree Shaking 的使用和原理分析
- Scope Hositing 使用和原理分析
- 优化构建命令行的显示日志
这篇，我们从两速度和体积来分析代码，进行优化。
速度分析
插件：speed-measure-webpack-plugin
作用：
- 分析整个打包总耗时
- 每个loader和插件的耗时情况
代码如下：
体积分析
插件：webpack-bundle-analyzer
作用：
- 依赖的第三方模块文件大小
- 业务里面组件代码大小
代码如下：
体积分析-多进程/多实例构建
可选方案：parallel-webpack、HappyPack、thread-loader（官方推荐）
thread-loader / HappyPack 原理：每次 webpack 解析一个模块，thread-loader/HappyPack 会将它及它的依赖分配给 node worker 线程中
代码如下：
体积分析-多进程/多实例 并行压缩
方法一：parallet-uglify-plugin
方法二：Uglifyjs-webpack-plugin 开启 parallet 参数
方法三：terser-webpack-plugin 开启 parallet 参数
方法二和方法三 区别：后者可以压缩 es6 语法
代码如下：
开启 parallet 参数，构建速度将100ms ——> 80ms
体积分析-缓存
目的：提升二次构建速度
思路：
babel-loader 开启缓存，js 语法转化
terser-webpack-plugin 开启缓存，在代码压缩阶段提升速度
使用 cache-loader 或者 hard-source-webpack-plugin，提升模块转换阶段
代码如下：
耗时从 50ms —>10ms
体积分析-缩小构建目标
目的：尽可能的减少构建模块
比如：babel-loader 不解析 node_modules
减少文件搜素范围：
- 优化 resolve.modules 配置，尽量减少模块搜索层级，在当前根目录查找
- 优化 resolve.mainFields 配置，减少查找链路
- 优化 resolve.extensions 配置，缩小查找范围
- 合理使用 alias，缩小查找时间
代码如下：
体积分析-tree shaking 擦除无用 css
插件：
purifycss-webpack-plugin
purgecss-webpack-plugin(最新)
webpack4：MiniCssExtractPlugin 配合使用
webpack3：ExtractTextWebpackPlugin 配合使用
代码如下：
注意：path是绝对路径
体积分析-图片压缩
插件：image-webpack-loader
相关参数：https://github.com/tcoopman/image-webpack-loader
该插件基于 Node 库的 imagemin 或者 tinypng API
imagemin 库的优点：
- 有很多定制选项
- 可以引入更多第三方优化插件，如 pngquart
- 可以处理多种图片格式
代码如下：
当然，webpack 优化还有很多，大家感兴趣可以多去学习
