webpack4.0 优化

上一篇，总结了 webpack4.0 进阶，其中包括：

• px 自动转rem
• Tree Shaking 的使用和原理分析
• Scope Hositing 使用和原理分析
• 优化构建命令行的显示日志

这篇，我们从两速度和体积来分析代码，进行优化。

速度分析

插件：speed-measure-webpack-plugin

作用：

1. 分析整个打包总耗时
2. 每个loader和插件的耗时情况

代码如下：

image.png

体积分析

插件：webpack-bundle-analyzer

作用：

1. 依赖的第三方模块文件大小
2. 业务里面组件代码大小

代码如下：

image.png

体积分析-多进程/多实例构建

可选方案：parallel-webpack、HappyPack、thread-loader（官方推荐）

thread-loader / HappyPack 原理：每次 webpack 解析一个模块，thread-loader/HappyPack 会将它及它的依赖分配给 node worker 线程中

代码如下：

image.png

体积分析-多进程/多实例 并行压缩

方法一：parallet-uglify-plugin
方法二：Uglifyjs-webpack-plugin 开启 parallet 参数
方法三：terser-webpack-plugin 开启 parallet 参数

方法二和方法三 区别：后者可以压缩 es6 语法

代码如下：

image.png

开启 parallet 参数，构建速度将100ms ——> 80ms

体积分析-缓存

目的：提升二次构建速度

思路：

babel-loader 开启缓存，js 语法转化
terser-webpack-plugin 开启缓存，在代码压缩阶段提升速度
使用 cache-loader 或者 hard-source-webpack-plugin，提升模块转换阶段

代码如下：

image.png

耗时从 50ms —>10ms

体积分析-缩小构建目标

目的：尽可能的减少构建模块

比如：babel-loader 不解析 node_modules

减少文件搜素范围：

• 优化 resolve.modules 配置，尽量减少模块搜索层级，在当前根目录查找
• 优化 resolve.mainFields 配置，减少查找链路
• 优化 resolve.extensions 配置，缩小查找范围
• 合理使用 alias，缩小查找时间

代码如下：

image.png

体积分析-tree shaking 擦除无用 css

插件：

purifycss-webpack-plugin
purgecss-webpack-plugin(最新)

webpack4：MiniCssExtractPlugin 配合使用
webpack3：ExtractTextWebpackPlugin 配合使用

代码如下：

image.png

注意：path是绝对路径

体积分析-图片压缩

插件：image-webpack-loader

相关参数：https://github.com/tcoopman/image-webpack-loader

该插件基于 Node 库的 imagemin 或者 tinypng API
imagemin 库的优点：

• 有很多定制选项
• 可以引入更多第三方优化插件，如 pngquart
• 可以处理多种图片格式

代码如下：

image.png

当然，webpack 优化还有很多，大家感兴趣可以多去学习

推荐文章：

https://github.com/lcxfs1991/blog/issues/2