如何优化构建速度

如何优化构建速度

优化 loader 匹配范围

在使用 loader 时，可以通过配置 include、exclude、test 属性来匹配文件，接触 include、exclude 规定哪些匹配应用 loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  module: {
    rules: [
      {
        // 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能
        test: /\.js$/,
        // babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启
        use: ["babel-loader?cacheDirectory"],
        // 只对项目根目录下的 src 目录中的文件采用 babel-loader
        include: path.resolve(__dirname, "src"),
      },
    ],
  },
};

合理配置 resolve.extensions

它的主要作用，就是写 import、required 时候不用加上文件后缀名。当我们引入文件时候没有文件后缀名，就会根据 extensions 依次查找。

如果这个后缀名很多，就会调用多次文件查找，这样就会减慢打包速度。按需添加，不要什么后缀名都写上去。

1
2
3
module.exports = {
  extensions: [".warm", ".mjs", ".js", ".json"],
};

给路径取别名 resolve.alias

我们引入文件时候经常存在../../../，我们可以配置 alias 可以减少查找过程。

1
2
3
4
5
6
7
module.exports = {
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
};

多进程打包

适合大项目

1
2
3
4
5
6
7
8
9
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
      }),
    ],
  },
};

合理使用 sourceMap

合理使用 sourceMap