第 279 期 《webpack 打包优化-理论分析篇》by 无尘

[dave-qiao]

webpack 打包优化-理论分析篇

为什么优化？优化的目的是什么？

首先测试一下你的H5页面的性能得分以及优化建议

测试地址：

• https://developers.google.com/speed/pagespeed/insights
• https://webpagetest.org/
• Google 浏览器调试工具中 Lighthouse 工具

如何优化

• 减少文件体积，从而降低页面资源加载时间，减少白屏时间
• 提升打包速度，降低整体构建时间

优化方向1-包体积大小

如何分析包的体积以及依赖包体积， webpack 的 webpack-bundle-analyzer

• 提取共用依赖
  • vender
  • DllPlugin and DllReferencePlugin
• 代码分割
  • splitChunks
• 懒加载
  • 动态引入结合代码分割。
• 外部不变扩展使用 CDN
  • extenals 配置

优化方向2-打包速度

如何看打包速度，核心关注 loader 处理的速度，webpack 的 speed-measure-webpack-plugin 插件

• 减少搜索依赖的时间
  • Loader 规则处理忽略不必要的文件
  • 三方稳用依赖使用 cdn
• 减少打包的数量
  • 分项目各自提前打包产物 如组件库 sdk 库等发布时打包产物，不在项目使用时再构建
• 多进程打包
  • 对耗时的 loader 做多进程处理配置 thread-loader
• 多进程压缩
  • uglifyjs-webpack-plugin 开启 parallel 参数
  • terser-webpack-plugin 开启 parallel 参数

参考引用

• webpack官网 4.0版本
• 性能指标定义