使用 happypack 提高 Webpack 項目構建速度

時間 2019-11-06

標籤使用 happypack 提高 webpack 項目構建速度简体版

原文原文鏈接

本文簡單介紹了 Happypack 的簡單使用，不瞭解的同窗能夠進來看一看。也許會有所幫助。css

Happypack 做用

在使用 Webpack 對項目進行構建時，會對大量文件進行解析和處理。當文件數量變多以後，Webpack 構件速度就會變慢。因爲運行在 Node.js 之上的 Webpack 是單線程模型的，因此 Webpack 須要處理的任務要一個一個進行操做。node

而 Happypack 的做用就是將文件解析任務分解成多個子進程併發執行。子進程處理完任務後再將結果發送給主進程。因此能夠大大提高 Webpack 的項目構件速度webpack

因爲 JavaScript 是單線程模型，要想發揮多核 CPU 的能力，只能經過多進程去實現，而沒法經過多線程實現。git

本文項目代碼地址：webpack-happypack-demogithub

歡迎 Star！web

Happypack 的使用

Happypack 只是做用在 loader 上，使用多個進程同時對文件進行編譯。npm

安裝

$ npm install happypack --save-dev
複製代碼

使用（三步操做便可完成）

1、安裝完成以後引入 HappyPack

webpack.config.jsbash

const HappyPack = require('happypack');

module.exports = {
    ...
}
複製代碼

2、將經常使用的 `loader` 替換爲 `happypack/loader`

webpack.config.jsbabel

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/
        ]
    }
}
複製代碼

3、建立 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