本文簡單介紹了 Happypack 的簡單使用,不瞭解的同學可以進來看一看。也許會有所幫助。
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
本文 Demo 地址
本文專案程式碼地址:webpack-happypack-demo
歡迎 Star!