多进程/多实例：并行压缩
- 使用 parallel-uglify-plugin 插件
- uglifyjs-webpack-plugin 开启 parallel 参数
- terser-webpack-plugin 开启 parallel 参数：推荐使用
多进程/多实例构建
资源并行解析可选方案
多进程/多实例：使用 HappyPack 解析资源
原理：
- 每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中
代码演示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25exports.plugins = [
new HappyPack({
id: 'jsx',
threads: 4,
loaders: [ 'babel-loader' ]
}),
new HappyPack({
id: 'styles',
threads: 2,
loaders: [ 'style-loader', 'css-loader', 'less-loader' ]
})
];
exports.module.rules = [
{
test: /\.js$/,
use: 'happypack/loader?id=jsx'
},
{
test: /\.less$/,
use: 'happypack/loader?id=styles'
},
]工作流程：webpack compiler run方法执行后，到达HappyPack。HappyPack会做一些初始化，初始化工作之后，会创建一个线程池。线程池可能包括多个线程。线程池会将构建任务里面的模块进行分配。线程池里面的线程会去各自处理模块以及相关依赖，处理完成之后，会有一个通信的过程。会将处理好的资源传输给HappyPack的主进程。完成整个构建的过程。
使用高版本的webpack和Node.js
使用高版本的webpack和Node.js
- V8 带来的优化（for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf）
- 默认使用更快的 md4 hash 算法，替代md5 hash
- webpacks AST 可以直接从 loader 传递给 AST，减少解析时间
- 使用字符串方法替代正则表达式
- 可以从webpack版本日志，了解做了哪些性能优化
体积分析：使用webpack-bundle-analyzer
体积分析：使用webpack-bundle-analyzer
代码示例：构建完成后会在 8888 端口展示大小
1
2
3
4
5
6
7const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
};
速度分析：使用speed-measure-webpack-plugin
速度分析：使用speed-measure-webpack-plugin
使用：将默认配置文件包裹起来
1
2
3
4
5
6
7
8
9
10
11const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
//将默认的webpack配置文件包裹起来
const webpackConfig = smp.wrap({
plugins: [
new MyPlugin(),
new MyOtherPlugin()
]
});