webpack5 编译打包优化

1 webpack版本

webpack 的版本为 v5.37.0

2 优化手段

webpack5 的持久缓存以及代码分割

3 优化前后数据对比

持久缓存：「开发环境」编译速度数据对比

持久缓存 + 未分割代码：「生产环境」构建速度数据对比

持久缓存 + 分割代码：「生产环境」构建速度数据对比（联合使用更好）

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'
    }
}
复制代码