webpack5 编译打包优化

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'
    }
}