webpack打包优化

Webpack 的优化点很多，可以分成 构建速度优化 和 打包体积优化 两大类。下面给你整理一份比较系统的清单：

---

🔹 一、构建速度优化

减少打包时间，让开发体验更流畅。

1. 合理使用 mode

   • 开发环境：mode: "development"，默认不开启压缩，构建快。
   • 生产环境：mode: "production"，自动启用压缩、tree-shaking 等。

2. 开启缓存

   • 持久化缓存（Webpack 5 内置）：

     cache: {
       type: "filesystem"
     }

     会把模块和构建结果缓存到硬盘，下次构建直接复用。

3. 多进程/多线程

   • 使用 thread-loader 或 parallel-webpack：

     {
       loader: "thread-loader",
       options: { workers: 2 }
     }

4. 缩小构建范围

   • 配置 include / exclude，减少 babel-loader 等 loader 的处理范围。
   • 合理使用 resolve.modules、resolve.alias，避免层层查找。

5. DLL / externals

   • 较老的方法：DllPlugin 提前打包不常改动的库。
   • 或者 externals 把第三方库（React、Vue）交给 CDN，不参与打包。

6. 增量构建

   • 使用 webpack-dev-server 的 HMR（热更新） ，只重新编译改动部分。

---

🔹 二、打包体积优化

减少产物大小，提升加载速度。

1. Tree-Shaking

   • Webpack 2+ 内置，前提是：

     • 使用 ES Module (import/export)。
     • sideEffects: false 或者指定有副作用的文件。

   • 配合 TerserPlugin 去除无用代码。

2. 代码分割（Code Splitting）

   • 使用 optimization.splitChunks 拆分公共依赖。
   • 动态 import()，实现按需加载。

3. 压缩与优化

   • JS 压缩：默认 TerserPlugin。
   • CSS 压缩：css-minimizer-webpack-plugin。
   • 图片压缩：image-minimizer-webpack-plugin（或构建时用 tinypng）。

4. 减少 polyfill 体积

   • 按需引入 polyfill：core-js + @babel/preset-env + useBuiltIns: "usage"。

5. Scope Hoisting（作用域提升）

   • optimization.concatenateModules: true，减少函数包装。

6. 使用更小的依赖

   • Lodash → lodash-es + babel-plugin-lodash
   • Moment.js → dayjs
   • antd → 按需加载 babel-plugin-import

7. 懒加载资源

   • 路由级代码分割。
   • 大图、视频采用延迟加载（react-lazyload，loading="lazy"）。

---

🔹 三、生产部署优化

1. 开启 Gzip 或 Brotli

   • 使用 compression-webpack-plugin 生成 .gz / .br 文件，配合 Nginx。

2. CDN 加速

   • 静态资源放到 CDN，减少服务器压力。

3. 长缓存优化

   • output.filename: '[name].[contenthash].js'
   • 确保修改后才更新 hash，未修改的文件可走浏览器缓存。

4. Preload / Prefetch

   • 提前加载关键资源：

     <link rel="preload" as="script" href="main.js" />
     <link rel="prefetch" href="chunk-vendors.js" />

---

👉 总结：

• 开发阶段：缓存、HMR、多进程、缩小 loader 范围。
• 生产阶段：Tree-shaking、代码分割、压缩优化、缓存策略、CDN。

---