webpack优化-多进程打包（18）

前言
项目比较大时，一般JS代码也会比较多，而且S代码得经过eslint、Babel和Terser（这个是生产模式下默认对Js文件打包的工具，是webpack默认的配置，无需我们自己配置）三个工具的处理。要想提高项目的打包速度，就得提高它们的运行速度。
开启多进程同时处理JS文件，这样速度会比单进程快。

多进程打包基本介绍
多进程打包是指开启多个进程同时处理一件事情，速度会比较快。
但是每开启多一个进程就会耗费600ms左右，所以只有在特别耗时的操作中才使用多进程，否则只会让速度更加缓慢。项目比较大，JS文件比较多，打包比较慢的情况下才需要开启多进程。

1、多进程的启动
启动进程的最多数量是我们的cpu核数。开发模式、生产模式都可以使用。
1、获取cpu的核数

const os = require('os');//引入node.js核心模块之一，系统模块
const tree = os.cpus().length;//获取cpu的核数

2、要想开启多线程，需要借助hread-loader，下载该loader

npm i thread-loader -D

3、在webapck开发、生产配置文件中加上处理Babel的多线程处理

{
   test: /\.js$/,//匹配js文件
   //排除node_modules文件，这里的内容是处理已经好的，无需重复处理，加大工作量
   exclude: /node_modules/,
   use: [
       // 多线程是在Babel-loader的前面
       {

           loader: 'thread-loader',//开启多线程
           options: {
               works: tree,//cpu的核数就是多线程的个数
           }
       },
       {
           loader: "babel-loader",
           // 这里可以在options中配置预设，
           // 也可以单独用babel.config.js文件配置，效果一样
           options: {
               // presets: ["@babel/preset-env"]
               cacheDirectory: true,//开启Babel缓存
               //关闭缓存文件压缩，这个文件只会消耗本地的磁盘空间，不会上线
               // 所以可以不压缩，不压缩可以减少文件进行压缩的时间
               cacheCompression:false,
           }
       }
   ]
}

4、同样配置处理eslint的多线程

new ESLintPlugin({
   // context就是需要检查的文件目录，使用绝对路径,其他配置可以看官网
   context: path.resolve(__dirname, '../src'),
   cache: true,//开启缓存
   cacheLocation: path.resolve(__dirname,'../node_modules/.cache/eslintcache'),
   tree,//开启多线程
}),

5、开启多线程压缩JS

要想自定义terser-webpack-plugin插件，需要下载后再自行定义：

npm i terser-webpack-plugin -D

自定义多线程处理JS压缩，optimization和mode同级，一般压缩插件放这里

optimization: {
   minimize: true,
   // 一般压缩的插件都是放在这里，也可以放在plugins，不够官网建议放这里
   minimizer: [
       new MiniCssExtractPlugin({
           // 配置输出的样式文件路径和名字，不配置就会直接默认在dist目录中
           filename: 'static/index.css',
       }),
       new terserWebpackPlugin({
           parallel: tree,//启用多线程
       })
   ],
},

成功运行