文章目录
前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
一、Happypack 作用?
在使用 Webpack 对项目进行构建时,会对大量文件进行解析和处理。当文件数量变多之后,Webpack 构件速度就会变慢。由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以 Webpack 需要处理的任务要一个一个进行操作。
而 Happypack 的作用就是将文件解析任务分解成多个子进程并发执行。子进程处理完任务后再将结果发送给主进程。所以可以大大提升 Webpack 的项目构件速度
由于 JavaScript 是单线程模型,要想发挥多核 CPU 的能力,只能通过多进程去实现,而无法通过多线程实现。
本文项目代码地址:webpack-happypack-demo
欢迎 Star!
二、Happypack 的使用
Happypack 只是作用在 loader 上,使用多个进程同时对文件进行编译。
安装
$ npm install happypack --save-dev
使用(三步操作即可完成)
一、安装完成之后引入 HappyPack
webpack.config.js
const HappyPack = require('happypack');
module.exports = {
...
}
二、将常用的 loader
替换为 happypack/loader
webpack.config.js
const HappyPack = require('happypack');
module.exports = {
...
module: {
rules: [
test: /\.js$/,
// use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
// 现在用下面的方式替换成 happypack/loader,并使用 id 指定创建的 HappyPack 插件
use: ['happypack/loader?id=babel'],
// 排除 node_modules 目录下的文件
exclude: /node_modules/
]
}
}
三、创建 HappyPack 插件
webpack.config.js
const HappyPack = require('happypack');
module.exports = {
...
module: {
rules: [
test: /\.js$/,
// use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
// 现在用下面的方式替换成 happypack/loader,并使用 id 指定创建的 HappyPack 插件
use: ['happypack/loader?id=babel'],
// 排除 node_modules 目录下的文件
exclude: /node_modules/
]
},
plugins: [
...,
new HappyPack({
/*
* 必须配置
*/
// id 标识符,要和 rules 中指定的 id 对应起来
id: 'babel',
// 需要使用的 loader,用法和 rules 中 Loader 配置一样
// 可以直接是字符串,也可以是对象形式
loaders: ['babel-loader?cacheDirectory']
})
]
}
这样 Happypack 的使用就配置完了,运行项目,可以看到控制台打印如下提示:
Happy[babel]: Version: 5.0.1. Threads: 3
Happy[babel]: All set; signaling webpack to proceed.
说明配置生效了。
三. Happypack 示例
使用单个 loader 时
上面的使用中就是单个 loader 时的配置,这里再写一次
exports.module = {
rules: [
{
test: /.js$/,
use: 'happypack/loader?id=babel'
}
]
};
exports.plugins = [
new HappyPack({
id: 'babel',
loaders: [ 'babel-loader?cacheDirectory' ]
});
];
使用多个 loader 时
exports.module = {
rules: [
{
test: /\.(css|less)$/,
use: 'happypack/loader?id=styles'
},
]
};
exports.plugins = [
new HappyPack({
id: 'styles',
loaders: [ 'style-loader', 'css-loader', 'less-loader' ]
});
];
四. Happypack 配置项
-
id: String类型,对于 happypack 来说唯一的 id 标识,用来关联 module.rules 中的 happypack/loader
-
loaders: Array类型,设置各种 loader 配置,与 module.rules 中 loader 的配置用法一样
// 无配置时,可直接使用字符串形式
new HappyPack({
id: 'babel',
loaders: ['babel-loader?cacheDirectory']
})
// 有配置项时,可以使用对象形式
new HappyPack({
id: 'babel',
loaders: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
})
-
threads: Number类型,指示对应 loader 编译源文件时同时使用的进程数,默认是 3
-
threadPool: HappyThreadPool对象,代表共享进程池,即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务,以防止资源占用过多
// 创建一个 HappyThreadPool,作为所有 loader 共用的线程池
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });
...
new HappyPack({
id: 'babel',
loaders: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
],
threadPool: happyThreadPool
})
-
verbose: 是否允许 happypack 输出日志,默认是 true
-
verboseWhenProfiling: 是否允许 happypack 在运行 webpack --profile 时输出日志,默认是 false
-
debug: 是否允许 happypack 打印 log 分析信息,默认是 false
五. 个人总结
-
在测试 Demo 或者小型项目中,使用 happypack 对项目构建速度的提升不明显,甚至会增加项目的构建速度
-
在比较复杂的大中型项目中,使用 happypack 才能看到比较明显的构建速度提升
-
因此,在使用 happypack 时请根据具体情况进行选择,如果反而延长了项目的构建速度,就没有必要使用 happypack