Web 应用日益复杂,相关开发技术也百花齐放,这对前端构建工具提出了更高的要求。 Webpack 从众多构建工具中脱颖而出成为目前最流行的构建工具,几乎成为目前前端开发里的必备工具之一。 大多数人在使用 Webpack 的过程中都会遇到构建速度慢的问题,在项目大时显得尤为突出,这极大的影响了我们的开发体验,降低了我们的开发效率。
本文将传授你一些加速 Webpack 构建的技巧,下面来一一介绍。
通过多进程并行处理
由于有大量文件需要解析和处理,构建是文件读写和计算密集型的操作,特别是当文件数量变多后,Webpack 构建慢的问题会显得严重。 运行在 Node.js 之上的 Webpack 是单线程模型的,也就是说 Webpack 需要处理的任务需要一件件挨着做,不能多个事情一起做。
文件读写和计算操作是无法避免的,那能不能让 Webpack 同一时刻处理多个任务,发挥多核 CPU 电脑的威力,以提升构建速度呢?
使用 HappyPack
HappyPack 就能让 Webpack 做到上面抛出的问题,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。
接入 HappyPack 的相关代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | const path = require( 'path' );
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
const HappyPack = require( 'happypack' );
module.exports = {
module: {
rules: [
{ test: /\.js$/,
use:[ 'happypack/loader?id=babel' ],
exclude: path.resolve(__dirname, 'node_modules' ),
},
{
test: /\.css$/,
use:ExtractTextPlugin.extract({
use: [ 'happypack/loader?id=css' ],
}),
},
] },
plugins: [
new HappyPack({
id: 'babel' ,
loaders: [ 'babel-loader?cacheDirectory' ],
}),
new HappyPack({
id: 'css' ,
loaders: [ 'css-loader' ], }),
new ExtractTextPlugin({
filename: `[name].css`,
}),
],
};
|
以上代码有两点重要的修改:
在 Loader 配置中,所有文件的处理都交给了 happypack/loader 去处理,使用紧跟其后的 querystring ?id=babel 去告诉 happypack/loader 去选择哪个 HappyPack 实例去处理文件。
在 Plugin 配置中,新增了两个 HappyPack 实例分别用于告诉 happypack/loader 去如何处理 .js 和 .css 文件。选项中的 id 属性的值和上面 querystring 中的 ?id=babel 相对应,选项中的 loaders 属性和 Loader 配置中一样。
接入 HappyPack 后,你需要给项目安装新的依赖: