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 usedloaderReplace 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.

HappypackThe 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

HappypackConfiguration 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!