Introduction to the Happypack Plugin

Foreword: When we optimize a project, what comes to mind first? Sometimes search engines, but the optimization effect is not satisfactory, with the project is getting bigger and bigger, some optimization configuration can not meet our requirements, today to introduce a plugin, that is happypack. As we all know, webpack runs in a single thread when it is packaged on node, that is, one task is completed and then the next task is executed. This is certainly intolerable for some hotheads. Happypack solves this problem by dividing tasks among multiple child processes, which then return the results to the main process. Specifically,

The first time to write nuggets, nonsense not to say, directly on the configuration code:

const HappyPack = require('happypack');
 module: {
        rules: [
        {
            test: /\.vue$/,
            loader: 'happypack/loader? id=vue',
            include: resolve('src')}, {test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                use: 'happypack/loader? id=css'
            }),
            include: resolve('src')}, {test: /\.js$/,
            loader: 'happypack/loader? id=babel'
            include: [resolve('src'), resolve('node_modules/webpack-dev-server/client')]
        }
        ]
    },
    plugins: [
        new HappyPack({
            id: 'babel',
            loaders: [{
                loader: 'babel-loader'
            }]
        }),
        new HappyPack({
            id: 'css',
            loaders: [{
                loader: 'css-loader'
            }]
        }),
        new HappyPack({
            id: 'vue',
            loaders: [{
                loader: 'vue-loader'}]})],Copy the code

This is how happypack is configured in production. The main difference is that the loader in the original rules is changed to ‘happypack/loader? Id = XXX ‘, and in plugin we need to instantiate HappyPack. Thus, happypack is applied to our project.

Effect of contrast

  • The packing speed before Happypack was 5.95s

  • The packaging time after use is 2.15s

Conclusion: By comparison, the Happypack Plugin improves speed by 68%. Greatly improved our build performance.