webpack5 使用Thead多进程打包提升打包构建速度

为什么使用Thead

当项目越来越庞大时，打包速度越来越慢，甚至于需要一个下午才能打包出来代码。这个速度是比较慢的。

我们想要继续提升打包速度，其实就是要提升 js 的打包速度，因为其他文件都比较少。

而对 js 文件处理主要就是 eslint 、babel、Terser 三个工具，所以我们要提升它们的运行速度。

我们可以开启多进程同时处理 js 文件，这样速度就比之前的单进程打包更快了。

Thead是什么

多进程打包：开启电脑的多个进程同时干一件事，速度更快。

需要注意：请仅在特别耗时的操作中使用，因为每个进程启动就有大约为 600ms 左右开销。

thread-loader | webpack 中文文档webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。https://webpack.docschina.org/loaders/thread-loader/

怎么用

我们启动进程的数量就是我们 CPU 的核数。

如何获取 CPU 的核数，因为每个电脑都不一样。

// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;

下载包

npm i thread-loader -D

webpack.config.js(其中new TerserPlugin()方法用于生产环境)

//TerserPlugin  webpack自带压缩js
const TerserPlugin = require("terser-webpack-plugin");
const threads = os.cpus().length; //cpu 核数
module.exports = {
  module: {
    rules: [
     {
            test: /\.js$/,
            exclude: /(node_modules)/, //排除node_modules不做js转换处理
            // include: path.resolve(__dirname, "../src"), //只处理src下的文件 其它文件不处理和exclude方法二选一及可(相同效果)
 
            use: [
              {
                loader: "thread-loader", //开启多进程
                options: {
                  workers: threads, //开启个进程数量
                },
              },
              {
                loader: "babel-loader",
                options: {
                  cacheDirectory: true, //开启babel缓存
                  cacheCompression: false, //关闭缓存文件压缩提高打包的速度(不压缩只会占用电脑内存,线上项目不会读取缓存代码文件)
                  //   presets: ["@babel/preset-env"],配置可以写到babel.config.js文件中好维护
                },
              },
            ],
          },
    ],
  },
  plugins: [
    new ESLintPlugin({
      //context指定文件根目录，类型为字符串(检查src下的文件)
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", //默认值
      cache: true, //开启缓存
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ), //缓存放置路径
      threads, //开启程序数量
    }),
 // 压缩js  当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
    new TerserPlugin({
      parallel: threads // 开启多进程
    })
}
};

以上plugins中压缩插件写法webpack4和5都支持

针对webapck5压缩插件写法

优化(Optimization) | webpack 中文文档webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。https://webpack.docschina.org/configuration/optimization/

module.exports = {
 
  plugins: [
    /**
     * 压缩的操作--webpack4写法,webpack5也支持
     *css压缩
     *new CssMinimizerPlugin(),
     *压缩js  当生产模式会默认开启TerserPlugin，但是我们需要进行其他*配置，就要重新写了
     *  new TerserPlugin({
     *    parallel: threads, // 开启多进程
     *  }),
     */
  ],
 
  optimization: {
    // 压缩的操作--webpack5写法
    minimizer: [
      // css压缩
      new CssMinimizerPlugin(),
      // 压缩js  当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
      new TerserPlugin({
        parallel: threads, // 开启多进程
      }),
    ],
  },
};