转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack生产环境优化：多线程打包
多线程打包主要用于需要打包的文件较多的情况下提高打包效率，缩短打包时间。
注意：开启多进程打包时，进程开启大概需要600ms，进程通信也有开销。
建议：只有工作消耗时间比较长时，才开启多进程打包。否则可能开多进程打包后，花费的时间会更长。
一、下载插件
多线程打包需要插件
thread-loader的支持。
这里使用thread-loader@2.1.3
> npm i -D thread-loader@2.1.3
二、核心配置
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
module.exports = {
// webpack配置
// 入口起点文件
entry: './src/js/index.js',
// 输出
output: {
// 输出文件名
filename: 'js/built.[contenthash:10].js',
// 输出路径
// __dirname nodejs的变量,代表当前文件的目录绝对路径
path: resolve(__dirname, 'build'),
},
// loader的配置
module: {
rules: [
// 详细loader配置
//不同文件必须配置不同loader处理
……
{
// 以下 loader 只会匹配一个
// 注意：不能有两项配置处理同一种类型的文件
// 例如：js文件的语法检查和兼容性处理，不能放在同一个oneOf中。
oneOf: [
……
/*
js兼容性处理:babel-loader @babel/core @babel/preset-env
1.基本js兼容性处理 @babel/preset-env
问题：只能转换基本语法，如promise不能转换
2．全部js兼容性处理 --> @babel/polvfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
3. 需要做兼容性处理的就做：按需加载 --> core-js
*/
{
test: /\.(?:js|mjs|cjs)$/,
exclude: /node_modules/,
use: [
/*
开启多进程打包
进程启动大概为600ms，进程通信也有开销。
只有工作消耗时间比较长，才需要多进程打包
*/
{
loader: "thread-loader",
options:{
workers:2 //启用两个进程
}
},
{
// 指定检查的目录，或者配置排除某些文件夹
// include: [path.resolve(__dirname, 'src')],
// 注意:只检查自己写的源代码,第三方的库是不用检查的,这里排除node_modules文件夹
loader: "babel-loader",
options: {
// 预设：指示 babel 做怎么样的兼容性处理
"presets": [
[
"@babel/preset-env",
{
// 按需加载
useBuiltIns: 'usage',
// 制定 core-js 版本
corejs: {
version: 3
},
//指定兼容性做到哪个版本的浏览器
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
],
// 开启babel缓存
//第二次构建时，会读取之前的缓存
cacheDirectory: true
}
}
],
},
……
]// oneOf [] end
}// oneOf {} end
],
},
……
// 模式 development 开发环境，production 生产环境
// mode: 'development',
// 生产环境下会自动压缩js代码
mode: 'production',
……
};
核心配置
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
……
{
test: /\.(?:js|mjs|cjs)$/,
exclude: /node_modules/,
use: [
/*
开启多进程打包
进程启动大概为600ms，进程通信也有开销。
只有工作消耗时间比较长，才需要多进程打包
*/
"thread-loader",
{
loader: "babel-loader",
options: {
// 预设：指示 babel 做怎么样的兼容性处理
"presets": [
……
],
// 开启babel缓存
//第二次构建时，会读取之前的缓存
cacheDirectory: true
}
}
],
},
thread-loader通常配置在js兼容性检查中，当然也可以运用于其他loader配置。
OR
/*
webpack.config.js webpack的配置文件
路径： ./webpack.config.js
*/
……
{
test: /\.(?:js|mjs|cjs)$/,
exclude: /node_modules/,
use: [
/*
开启多进程打包
进程启动大概为600ms，进程通信也有开销。
只有工作消耗时间比较长，才需要多进程打包
*/
{
loader: "thread-loader",
options:{
workers:2 //启用两个进程
}
},
{
loader: "babel-loader",
options: {
// 预设：指示 babel 做怎么样的兼容性处理
"presets": [
……
],
// 开启babel缓存
//第二次构建时，会读取之前的缓存
cacheDirectory: true
}
}
],
},
配置开启的多进程数量