(1). 痛点:

①. webpack构建过程中的有两个部分是直接影响构建效率:a. 文件的编译(更为耗时).b. 文件的分类打包.②. js是单线程模型:a. Node环境下文件只能一个一个去处理,webpack执行预处理文件时单线程的.③. 在webpack构建过程中:a. 需要使用Loader对js、css、图片、字体等文件做转换操作.b. 并且转换的文件数据量非常大,不能并发处理文件,需要一个个文件进行处理.

(2). HappyPack多线程执行:

①. HappyPack可以多线程处理文件:a. HappyPack把任务分解给多个子进程去并行处理,子进程处理完后再把结果发送给主进程.b. HappyPack对file-loader、url-loader支持不友好,所以,不建议对该loader使用.②. webpack4发表后,happypack已经不维护了,有新的thread-loader代替.③. 如果单纯地想加快编译打包速度的话,不如上dllplugin,比thread-loader快.

---

2. 实战:

(1). 安装:

yarn add happypack -D

(2). vue.config.js:

const HappyPack = require('happypack');
module.exports = {chainWebpack: config => {// 多线程config.plugin('HappyPack').use(HappyPack, [{loaders: [{loader: 'babel-loader?cacheDirectory=true'}]}])}
}