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, // 开启多进程}),],},
};