使用 happypack 和 terser-webpack-plugin 优化 Webpack 项目构建速度

HappyPack

HappyPack的工作原理：在Webpack和Loader之间多加了一层，改成了Webpack并不是直接去和某个Loader进行工作，而是Webpack test到了需要编译的某个类型的资源模块后，将该资源的处理任务交给了HappyPack，由HappyPack在内部线程池中进行任务调度，分配一个线程调用处理该类型资源的Loader来处理这个资源，完成后上报处理结果，最后HappyPack把处理结果返回给Webpack，最后由Webpack输出到目的路径。通过这一系列操作，将原本都在一个Node.js线程内的工作，分配到了不同的线程（进程）中并行处理。
happy pack 原理解析
1、安装HappyPack

npm install happypack --save-dev

2、在webpack.base.conf.js中引入happypack

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

文档：happypack、os.cpus()
3、在webpack.base.conf.js的plugins中新增

new HappyPack({
	// id标识babel处理那一类文件
	id: 'babel',
	// 配置loader
	loaders: [
		{
			path: 'babel-loader',
			query: {
				babelrc: true,
				cacheDirectory: true
			}
		}
	],
	// 共享进程池
	threadPool: happyThreadPool,
	// 日志输出
	verbose: true
})

4、修改webpack.base.conf.js中的rules

{
	test: /\.js$/,
	loader: 'happypack/loader?id=babel',
	include: [
		resolve('src'),
		resolve('node_modules/webpack-dev-server/client')
	],
	exclude: /node_modules/
}

打包显示：

terser-webpack-plugin

文档：terser-webpack-plugin
打包时使用terser-webpack-plugin替换uglifyjs-webpack-plugin实现多线程压缩js代码
1、安装terser-webpack-plugin

npm install terser-webpack-plugin --save-dev

2、在webpack.prod.conf.js中引入

const TerserPlugin = require('terser-webpack-plugin')

3、在webpack.prod.conf.js的optimization中新增

minimizer: [
	new TerserPlugin({
		test: /\.js(\?.*)?$/i,
		parallel: true,
		extractComments: true,
		sourceMap: config.build.productionSourceMap,
		terserOptions: {
			output: {
				// 是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，可以设置为false
				beautify: false,
				// 是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
				comments: false
			},
			compress: {
				// 是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用不大的警告
				warnings: false,
				// 是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
				drop_console: true,
				drop_debugger: true,
				// 是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不转换，为了达到更好的压缩效果，可以设置为false
				collapse_vars: true,
				// 是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx'  转换成var a = 'xxxx'; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
				reduce_vars: true,
				pure_funcs: ['console.log'] // 移除console
			}
		}
	}),
 ]