This article introduces the simple use of Happypack, if you are not familiar with it, you can come in and take a look. It might help.
Happypack role
When building a project with Webpack, a large number of files are parsed and processed. As the number of files increases, the Webpack artifacts become slower. Since Webpack running on Node.js is a single-threaded model, the tasks that Webpack needs to handle need to be operated on one by one.
The Happypack function is to break the file parsing task into multiple sub-processes that execute concurrently. The child process processes the task before sending the result to the main process. So you can greatly speed up Webpack’s project artifacts
Since JavaScript is a single-threaded model, the power of a multi-core CPU can only be realized through multiple processes, not multiple threads.
This article code address: webpack-happypack-demo
Welcome to Star!
The use of Happypack
Happypack only works on loader, using multiple processes to compile the file at the same time.
The installation
$ npm install happypack --save-dev
Copy the code
Use (three steps to complete)
After the installation is complete, introduce the HappyPack
webpack.config.js
const HappyPack = require('happypack');
module.exports = {
...
}
Copy the code
Two, will be commonly usedloader
Replace withhappypack/loader
webpack.config.js
const HappyPack = require('happypack');
module.exports = {
...
module: {
rules: [
test: /\.js$/.// use: ['babel-loader? CacheDirectory '
// Now replace with happypack/ Loader as follows and specify the happypack plug-in to be created using the id
use: ['happypack/loader? id=babel'].// Exclude files in node_modules
exclude: /node_modules/]}}Copy the code
Create a HappyPack plug-in
webpack.config.js
const HappyPack = require('happypack');
module.exports = {
...
module: {
rules: [
test: /\.js$/.// use: ['babel-loader? CacheDirectory '
// Now replace with happypack/ Loader as follows and specify the happypack plug-in to be created using the id
use: ['happypack/loader? id=babel'].// Exclude files in node_modules
exclude: /node_modules/]},plugins: [...new HappyPack({
/* * * must be configured
// The id identifier must correspond to the id specified in rules
id: 'babel'.// Use the same loader configuration as in rules
// It can be either a string or an object
loaders: ['babel-loader? cacheDirectory']]}})Copy the code
With the Happypack configured, run the project and see the console print the following message:
Happy[babel]: Version: 5.0.1. Threads: 3
Happy[babel]: All set; signaling webpack to proceed.
Copy the code
The configuration takes effect.
Happypack
The sample
Using a singleloader
时
In the example above, this is the single loader configuration, which is written again here
exports.module = {
rules: [{test: /.js$/.use: 'happypack/loader? id=babel'}}; exports.plugins = [new HappyPack({
id: 'babel'.loaders: [ 'babel-loader? cacheDirectory' ]
});
];
Copy the code
The use of multipleloader
时
exports.module = {
rules: [{test: /\.(css|less)$/.use: 'happypack/loader? id=styles'}]}; exports.plugins = [new HappyPack({
id: 'styles'.loaders: [ 'style-loader'.'css-loader'.'less-loader' ]
});
];
Copy the code
Happypack
Configuration items
-
Id: String. The happypack id is unique to the happypack and is used to associate the Happypack/Loader in Module. rules
-
Loaders: indicates the Array type. Loaders are used to configure different loaders, which is the same as loaders in module.rules
// If no configuration is configured, the value can be a string
new HappyPack({
id: 'babel'.loaders: ['babel-loader? cacheDirectory']})// When configuration items are available, use the object form
new HappyPack({
id: 'babel'.loaders: [{loader: 'babel-loader'.options: {
cacheDirectory: true}}}])Copy the code
-
Threads: Number type, indicating the Number of processes used by the loader to compile the source file. The default is 3
-
ThreadPool: a HappyThreadPool object that represents a shared process pool. That is, multiple HappyPack instances use child processes from the same shared process pool to process tasks to prevent excessive resource usage
// Create a HappyThreadPool that is shared by all Loaders
const happyThreadPool = HappyPack.ThreadPool({ size: 5}); . new HappyPack({id: 'babel'.loaders: [{loader: 'babel-loader'.options: {
cacheDirectory: true}}].threadPool: happyThreadPool
})
Copy the code
-
Verbose: specifies whether to allow happypack to output logs. The default value is true
-
VerboseWhenProfiling: Whether to allow happypack to output logs when running webPack –profile. Default is false
-
Debug: specifies whether to allow happypack to print log analysis information. The default value is False
Personal summary
A little personal summary, not enough as a reference basis
-
In test demos or small projects, using Happypack doesn’t increase your build speed significantly, or even increases your build speed
-
In more complex medium to large projects, you can only see a significant build speed improvement using Happypack
-
Therefore, use the Happypack according to the specific situation. If it actually lengthens the build speed of the project, there is no need to use the Happypack
Demo Address of this article
This article code address: webpack-happypack-demo
Welcome to Star!