使用 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',// 配置loaderloaders: [{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: {// 是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，可以设置为falsebeautify: false,// 是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为falsecomments: false},compress: {// 是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用不大的警告warnings: false,// 是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句drop_console: true,drop_debugger: true,// 是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不转换，为了达到更好的压缩效果，可以设置为falsecollapse_vars: true,// 是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx'  转换成var a = 'xxxx'; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为falsereduce_vars: true,pure_funcs: ['console.log'] // 移除console}}}),]