极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

# 如何提升 webpack 构建资源的速度

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 738 (opens new window)

使用 speed-measure-webpack-plugin (opens new window) 可评估每个 loader/plugin 的执行耗时。

# 持久化缓存: cache

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

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

如对一个 JS 文件配置了 eslinttypescriptbabelloader,他将有可能执行五次编译,被五次解析为 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 (opens new window) 仅仅对 loader 进行缓存。需要注意的是该 loader 目前已是 @depcrated 状态。

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

cache-loader

# 多进程: thread-loader

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

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

webpack4 中,可使用 happypack plugin (opens new window),但需要注意的是 happypack 已经久不维护了。

Last Updated: 11/27/2021, 10:11:48 AM