# 如何提升 webpack 的构建速度

> 使用 $1 可评估每个 loader/plugin 的执行耗时。 webpack5 内置了关于缓存的插件，可通过以下配置开启。它将 Module 、 Chunk 、 ModuleChunk 等信息序列化到磁盘中，二次构建避免重复编译计算，编译速度得到很大提升。 如对一个 JS 文件配置了 eslint 、 typescript 、 bab

- 发布于: 2019-03-26
- 更新于: 2026-09-30
- 原文: https://shanyue.tech/posts/frontend-engineering/webpack-build-time/
- 标签: frontend-engineering
- 专栏: 前端工程化

---

使用 [speed-measure-webpack-plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin) 可评估每个 loader/plugin 的执行耗时。

## 持久化缓存: cache

`webpack5` 内置了关于缓存的插件，可通过以下配置开启。它将 `Module`、`Chunk`、`ModuleChunk` 等信息序列化到磁盘中，二次构建避免重复编译计算，编译速度得到很大提升。

```js
{
  cache: {
    type: "filesystem";
  }
}
```

如对一个 JS 文件配置了 `eslint`、`typescript`、`babel` 等 `loader`，他将有可能执行五次编译，被五次解析为 AST

1. `acorn`: 用以依赖分析，解析为 `acorn` 的 AST
2. `eslint-parser`: 用以 lint，解析为 `espree` 的 AST
3. `typescript`: 用以 ts，解析为 `typescript` 的 AST
4. `babel`: 用以转化为低版本，解析为 `@babel/parser` 的 AST
5. `terser`: 用以压缩混淆，解析为 `acorn` 的 AST

而当开启了持久化缓存功能，最耗时的 AST 解析将能够从磁盘的缓存中获取，再次编译时无需再次进行解析 AST。

**得益于持久化缓存，二次编译甚至可得到与 Unbundle 的 vite 等相近的开发体验**

在 webpack4 中，可使用 [cache-loader](https://github.com/webpack-contrib/cache-loader) 仅仅对 `loader` 进行缓存。需要注意的是该 loader 目前已是 `@depcrated` 状态。

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.ext$/,
        use: ["cache-loader", ...loaders],
        include: path.resolve("src"),
      },
    ],
  },
};
```

![cache-loader](https://shanyue.tech/images/assets/src/cache-loader.7hlpm1nh2z40.webp)

## 多进程: thread-loader

`thread-loader` 为官方推荐的开启多进程的 `loader`，可对 babel 解析 AST 时开启多线程处理，提升编译的性能。

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "thread-loader",
            options: {
              workers: 8,
            },
          },
          "babel-loader",
        ],
      },
    ],
  },
};
```

在 `webpack4` 中，可使用 [happypack plugin](https://github.com/amireh/happypack)，但需要注意的是 `happypack` 已经久不维护了。