【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%。

怎么做：

bash 复制代码

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

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

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

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

js 复制代码

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

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

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

怎么做：

js 复制代码

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%+。

怎么做：

js 复制代码

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

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

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

怎么做：

js 复制代码

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（生成慢，适合生产）：
js 复制代码
```
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）：

js 复制代码

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

2. 用 `cache-loader` 缓存 Loader 结果

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

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

js 复制代码

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 处理时间太长），针对性优化。

怎么做：

bash 复制代码

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

js 复制代码

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

📌 小白必看避坑指南

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

【Webpack】Webpack 打包速度提升

【Webpack】Webpack 构建速度提升

文章目录

🔍 先明确两个概念的定义

1. 构建速度（Build Speed）

2. 打包速度（Bundle Speed）

🧩 两者的关系

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

1. 升级 Webpack 版本

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

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

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

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

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

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

3. 选择更快的 Source Map

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

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

2. 用 cache-loader 缓存 Loader 结果

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

4. 分离开发 / 生产配置

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

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

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

📌 小白必看避坑指南

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

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

3. 选择更快的 `Source Map`

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

2. 用 `cache-loader` 缓存 Loader 结果

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

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

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