1 webpack版本
webpack 的版本为 v5.37.0
2 优化手段
webpack5 的持久缓存以及代码分割
3 优化前后数据对比
持久缓存：「开发环境」编译速度数据对比
| Node版本 | 未优化耗时 | 优化后首次编译耗时 | 优化后二次编译耗时 | 优化后三次编译耗时 | 耗时降低（三次编译） |
|---|---|---|---|---|---|
| v14.16.1 | 18.85 | 18.016(写入缓存) | 10.042 | 10.81 | 43% |
持久缓存 + 未分割代码：「生产环境」构建速度数据对比
| Node版本 | 未优化耗时 | 优化后首次编译耗时 | 优化后二次编译耗时 | 优化后三次编译耗时 | 耗时降低（三次编译） |
|---|---|---|---|---|---|
| v14.16.1 | 33.04 | 33.15(写入缓存) | 24.43 | 25.79 | 22% |
持久缓存 + 分割代码：「生产环境」构建速度数据对比（联合使用更好）
| Node版本 | 未优化耗时 | 优化后首次编译耗时 | 优化后二次编译耗时 | 优化后三次编译耗时 | 耗时降低（三次编译） |
|---|---|---|---|---|---|
| v14.16.1 | 32.65 | 33.68(写入缓存) | 13.59 | 13.12 | 60% |
4 优化总结
- 开发环境下，持久缓存能有效节省了编译的耗时，耗时降低了 43%。
- 生产环境下，持久缓存与分割代码联合使用，更有效节省了编译的耗时，耗时降低了 60%。
- 生产环境下，分割代码 gzip 包减少了 100k
5 主要代码
引入 webpack5 新属性持久缓存（开发和生产环境）
参考链接：webpack.docschina.org/blog/2020-1…
cache: {
type: 'filesystem',
buildDependencies: {
config: [__filename]
}
}
复制代码分割代码（生产环境）
optimization: {
minimize: true,
splitChunks: {
chunks: 'all'
}
}
复制代码