前端性能优化-webpack构建优化

前言

本文主要总结 webpack 构建优化相关的事情

PS: webpack 的每次更新都会带来很多的新特性，因此学习新知识的时候，不要专注于流程的配置和调参。因为流程终会简化，参数（API）终会升级。要抓大放小，把精力放在最核心的内容上，因为核心的思想是最不容易过时的.

webpack 性能瓶颈

webpack 优化主要分为两个方向：

构建速度优化

• 使用最新版本的 webpack，一般融合了最佳实践
• 文件过滤：使用 include 和 exclude， ignorePlugin 等
• 优化 resolve.modules 配置: 合理配置 resolve.modules，指定 Webpack 去哪些目录下寻找模块。避免过多的目录会加速模块的查找速度。
• 优化 loader(减少 loader 链的复杂性， 如 thread-loader 或 cache-loader)
• 利用多核 CPU 多进程构建( HappyPack 或者 Webpack 5 提供的 cache 和 parallel 选项)
• 缓存(DLL 等空间换时间的方案)
• 使用更轻量的 SourceMap（cheap-module-source-map）
• 代码分割： 将代码拆分成小块，只加载在当前页面上需要的部分。
• 合理配置打包版本

代码分割(拆包 splitChunks)

在不配置拆包的情况下，Webpack 会将所有的资源都打包在一个 js 文件中，这无疑会让请求时候的响应体积变得非常大，从而降低加载速度。

同时，不配置拆包，会在首次加载的时候加载一些无关的资源，浪费了一次宝贵的请求。合理配置拆包，让每次请求都只请求对应的核心资源，从而达到按需加载的程度。

拆包通常的逻辑：

• 业务代码和第三方依赖进行拆分
• 对于第三方依赖：
  • 将版本经常变动的与版本不怎么变动的进行拆分
  • 版本不怎么变动的依赖可以合理配置 CDN
• 对于业务代码：
  • 将业务模块和公共模块进行拆分
  • 业务模块也根据调用的次数进行拆分
  • 将首屏模块单独进行拆分

合理配置打包版本

代码体积优化

• Three shaking 移除项目中未使用的代码
• 压缩代码: 如 terser-webpack-plugin, css-minimizer-webpack-plugin
• 分割代码（Code Splitting）
• 动态导入（Dynamic Import）
  • import(‘some-module’).then(({ someModule }) => {// 使用 someModule});
• 提取公共模块： 通过 Webpack 的 CommonsChunkPlugin 或 optimization.splitChunks 来提取公共模块，减小重复模块的体积
• 图像、字体等资源优化

掌握优化策略，然后用到的时候直接通过官方文档查找最新的 API 即可或者搜索关键字即可

参考

• https://jelly.jd.com/article/61179aa26bea510187770aa3
• https://juejin.cn/post/6844903952140468232

本文首发于个人博客前端开发笔记，由于笔者能力有限，文章难免有疏漏之处，欢迎指正