webpack性能优化总结

webpack性能优化总结

Posted by SkioFox on July 2, 2024

简介

webpack性能优化,其实就是从时间层面体积层面入手。对于时间层面主要就是优化webpack的构建速度(缩短构建时间)。对于体积层面主要就是优化webpack的构建结果(缩小构建结果)。

目前使用的 webpack 版本为 5.74.0、webpack-cli 的版本为 4.10.0

记录下几个总结要点方向

优化构建速度

对于 优化构建速度 我们可以从 定向查找、减少执行构建的模块、并行构建以提升总体速度、并行压缩提高构建效率、合理使用缓存几个方面入手。

img

优化构建结果

对于 优化构建结果 我们可以从 压缩代码、按需加载、提前加载、Code Splitting、Tree Shaking、Gzip、作用提升几个方面入手。

img

###常用分析工具

第一个是时间分析工具是 speed-measure-webpack-plugin

第二个是构建结果产物分析工具 webpack-bundle-analyzer