【Webpack】Webpack 打包速度提升

【Webpack】Webpack 构建速度提升

文章目录

• [【Webpack】Webpack 构建速度提升](#【Webpack】Webpack 构建速度提升)
• • [🔍 先明确两个概念的定义](#🔍 先明确两个概念的定义)
  • • [1. 构建速度（Build Speed）](#1. 构建速度（Build Speed）)
    • [2. 打包速度（Bundle Speed）](#2. 打包速度（Bundle Speed）)
  • [🧩 两者的关系](#🧩 两者的关系)
  • [🔧 一、通用基础优化（开发 / 生产都能用）](#🔧 一、通用基础优化（开发 / 生产都能用）)
  • • [1. 升级 Webpack 版本](#1. 升级 Webpack 版本)
    • [2. 精准配置 Loader 规则（减少无效处理）](#2. 精准配置 Loader 规则（减少无效处理）)
    • [3. 优化 `resolve` 配置（减少模块查找时间）](#3. 优化 resolve 配置（减少模块查找时间）)
    • [4. 减少模块数量（从代码层面优化）](#4. 减少模块数量（从代码层面优化）)
  • [🔄 二、开发环境专属优化（提升开发效率）](#🔄 二、开发环境专属优化（提升开发效率）)
  • • [1. 开启持久化缓存（Webpack 5 内置）](#1. 开启持久化缓存（Webpack 5 内置）)
    • [2. 使用 `webpack-dev-server` + HMR（热模块替换）](#2. 使用 webpack-dev-server + HMR（热模块替换）)
    • [3. 选择更快的 `Source Map`](#3. 选择更快的 Source Map)
  • [📦 三、生产环境专属优化（提升打包速度 + 减小体积）](#📦 三、生产环境专属优化（提升打包速度 + 减小体积）)
  • • [1. 多线程处理 Loader（用 `thread-loader` 替代 `HappyPack`）](#1. 多线程处理 Loader（用 thread-loader 替代 HappyPack）)
    • [2. 用 `cache-loader` 缓存 Loader 结果](#2. 用 cache-loader 缓存 Loader 结果)
    • [3. 开启 `Tree Shaking`（删除未使用代码）](#3. 开启 Tree Shaking（删除未使用代码）)
    • [4. 分离开发 / 生产配置](#4. 分离开发 / 生产配置)
  • [🛠️ 四、高级优化（适合中大型项目）](#🛠️ 四、高级优化（适合中大型项目）)
  • • [1. 用 `DLL` 或 `Module Federation` 拆分第三方依赖](#1. 用 DLL 或 Module Federation 拆分第三方依赖)
    • [2. 分析打包瓶颈（用 `webpack-bundle-analyzer`）](#2. 分析打包瓶颈（用 webpack-bundle-analyzer）)
  • [📌 小白必看避坑指南](#📌 小白必看避坑指南)

🔍 先明确两个概念的定义

1. 构建速度（Build Speed）

指从你执行构建命令（比如 npm run dev 或 npm run build）开始，到整个构建流程完全结束的总耗时。

它包含了 Webpack 工作的全流程：

• 读取配置、解析入口文件、分析依赖
• Loader 处理各类资源、Plugin 执行扩展逻辑
• 生成依赖图、打包模块成 Chunk
• 优化压缩、生成输出文件、写入磁盘

2. 打包速度（Bundle Speed）

是构建速度的核心子环节，特指从 "生成依赖图" 到 "生成最终输出文件（Bundle）" 这一阶段的耗时，也就是把分散的模块打包成可运行的 JS/CSS 文件的速度。

---

🧩 两者的关系

• 包含关系：打包速度是构建速度的一部分，构建速度包含了打包速度，还包含了前期的配置解析、依赖分析等准备工作的耗时。
• 日常混用：在前端开发中，大家经常把 "构建速度" 和 "打包速度" 混用，因为打包是构建流程中最耗时的环节，优化打包速度往往是提升构建速度的核心手段。

---

🔧 一、通用基础优化（开发 / 生产都能用）

1. 升级 Webpack 版本

• 为什么：Webpack 每大版本都会重构性能（比如 Webpack 5 内置了持久化缓存、更好的 Tree Shaking），新版本通常比旧版本快 20%-50%。

• 怎么做：

  npm install webpack@latest webpack-cli@latest --save-dev

2. 精准配置 Loader 规则（减少无效处理）

• 为什么 ：Loader 是打包速度的「重灾区」，如果让 babel-loader 处理 node_modules 里的文件，会浪费大量时间。

• 怎么做 ：用 include/exclude 限定 Loader 处理范围，只处理自己写的代码：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          use: 'babel-loader',
          include: path.resolve(__dirname, 'src'), // 只处理src下的文件
          exclude: /node_modules/ // 排除第三方库
        }
      ]
    }
  };

3. 优化 resolve 配置（减少模块查找时间）

• 为什么 ：Webpack 解析模块时，会遍历 node_modules 和文件扩展名，优化后可以减少查找次数。

• 怎么做：

  module.exports = {
    resolve: {
      extensions: ['.js', '.vue', '.json'], // 只解析常用扩展名，不要写太多
      alias: {
        // 给常用目录起别名，比如src -> @，减少路径层级查找
        '@': path.resolve(__dirname, 'src')
      },
      modules: [path.resolve(__dirname, 'node_modules')] // 直接指定node_modules路径，避免向上查找
    }
  };

4. 减少模块数量（从代码层面优化）

• 为什么：项目里的模块 / 依赖越多，Webpack 构建时间越长。
• 怎么做 ：
  • 删掉项目中没用到的依赖（比如用 depcheck 工具检测冗余依赖）。
  • 用更小的库替代大库（比如用 day.js 替代 moment.js，体积减少 90%）。
  • 避免把整个库导入（比如用 import { debounce } from 'lodash-es' 替代 import _ from 'lodash'）。

---

🔄 二、开发环境专属优化（提升开发效率）

1. 开启持久化缓存（Webpack 5 内置）

• 为什么：开发时修改代码后，Webpack 会缓存没变化的模块，下次构建直接复用缓存，速度提升 50%+。

• 怎么做：

  module.exports = {
    cache: {
      type: 'filesystem' // 用文件系统缓存，替代内存缓存（重启项目也不会丢失缓存）
    }
  };

2. 使用 webpack-dev-server + HMR（热模块替换）

• 为什么：修改代码后无需刷新页面，只更新变化的模块，开发时几乎秒更。

• 怎么做：

  module.exports = {
    devServer: {
      hot: true, // 开启HMR
      open: true, // 自动打开浏览器
      compress: true // 启用gzip压缩
    }
  };

3. 选择更快的 Source Map

• 为什么：开发时需要 Source Map 调试，但不同类型的 Source Map 生成速度差异很大。

• 怎么做 ：开发环境用 eval-cheap-module-source-map（生成快，调试体验好），不要用 source-map（生成慢，适合生产）：

  module.exports = {
    devtool: 'eval-cheap-module-source-map'
  };

---

📦 三、生产环境专属优化（提升打包速度 + 减小体积）

1. 多线程处理 Loader（用 thread-loader 替代 HappyPack）

• 为什么 ：HappyPack 已经停止维护，thread-loader 是 Webpack 官方推荐的多线程工具，能把 Loader 任务分给多个 CPU 核心处理，速度提升 30%-50%。

• 怎么做 ：把 thread-loader 放在其他 Loader 前面（比如 babel-loader）：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          use: [
            'thread-loader', // 先经过多线程处理
            'babel-loader'
          ],
          exclude: /node_modules/
        }
      ]
    }
  };

2. 用 cache-loader 缓存 Loader 结果

• 为什么 ：对于处理时间长的 Loader（比如 sass-loader），缓存其处理结果，下次构建直接复用。

• 怎么做 ：把 cache-loader放在其他 Loader 前面：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'cache-loader', // 缓存结果
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        }
      ]
    }
  };

3. 开启 Tree Shaking（删除未使用代码）

• 为什么 ：自动删掉项目中没用到的代码（比如只导入了 lodash 的 debounce，就删掉 lodash 其他没用到的函数），减小包体积的同时也能减少构建时间。
• 怎么做 ：生产环境默认开启，只需确保 mode: 'production'，且代码用 ES 模块（import/export，不要用 require）。

4. 分离开发 / 生产配置

• 为什么：开发环境不需要代码压缩、体积优化，生产环境不需要热更新、调试工具，分开配置可以避免冗余工作。
• 怎么做 ：用 webpack-merge 拆分配置：
  • webpack.common.js：通用配置（入口、输出、Loader 基础规则）
  • webpack.dev.js：开发环境配置（HMR、devtool、缓存）
  • webpack.prod.js：生产环境配置（代码压缩、Tree Shaking、多线程）

---

🛠️ 四、高级优化（适合中大型项目）

1. 用 DLL 或 Module Federation 拆分第三方依赖

• 为什么：把不常更新的第三方库（如 React、Vue、AntD）单独打包，下次构建时直接复用，不用重新打包这些大库。
• 怎么做 ：
  • 小型项目：用 DLLPlugin + DLLReferencePlugin（Webpack 4 常用）。
  • 中大型项目：用 Webpack 5 的 Module Federation（支持微前端，更灵活）。

2. 分析打包瓶颈（用 webpack-bundle-analyzer）

• 为什么：找到打包慢的根源（比如某个依赖太大、某个 Loader 处理时间太长），针对性优化。

• 怎么做：

  npm install webpack-bundle-analyzer --save-dev

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  module.exports = {
    plugins: [new BundleAnalyzerPlugin()] // 构建完成后自动打开分析页面
  };

---

📌 小白必看避坑指南

1. 不要盲目加插件 ：插件越多，构建越慢。比如 CleanWebpackPlugin 在 Webpack 5 里可以用 output.clean: true 替代，无需额外安装。
2. 开发环境别开代码压缩 ：生产环境用 TerserPlugin 压缩 JS，css-minimizer-webpack-plugin 压缩 CSS，但开发环境压缩会大幅减慢构建速度。
3. 别用 HappyPack ：已经停止维护，官方推荐用 thread-loader。
4. 缓存不是万能的 ：如果修改了 Webpack 配置或 Loader 版本，需要手动删除缓存目录（默认是 node_modules/.cache/webpack），否则缓存会失效。