最近在看《深刻淺出webpack》看到了happypack
。就想起公司一vue項目,每次項目啓動都將近2分鐘。等的實在讓人不耐煩,都夠我支付寶偷一波能量了。就本身實踐了下,事實證實是有效的。原平均構建速度爲1分55秒(5次),使用happypack後平均構建速度爲1分45秒(5次)。我只修改了對.vue文件的處理,以下實戰代碼,節省了10秒仍是不錯滴。javascript
因爲有大量文件須要解析和處理,構建是文件讀寫和計算密集型的操做,特別是當文件數量變多後,Webpack 構建慢的問題會顯得嚴重。 運行在 Node.js 之上的 Webpack 是單線程模型的,也就是說 Webpack 須要處理的任務須要一件件挨着作,不能多個事情一塊兒作。happypack
把任務分解給多個子進程去併發的執行,子進程處理完後再把結果發送給主進程。css
修改前代碼vue
// ... module: { // ... rules: [ { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, ] }, plugins: []
修改後代碼java
// ... module: { // ... rules: [ { test: /\.vue$/, loader: 'happypack/loader?id=vue', }, ] }, plugins: [ new HappyPack({ id: 'vue', loaders: [{ loader: 'vue-loader', options: vueLoaderConfig }], }), ]
在 Loader 配置中,全部.vue文件的處理都交給了 happypack/loader 去處理,使用緊跟其後的 querystring ?id=vue(這個id隨便去只要跟下面實例中的id對應上就好了) 去告訴 happypack/loader 去選擇哪一個 HappyPack 實例去處理文件(能夠new 多個HappyPack分別去處理多種類型文件,好比你能夠再new一個HappyPack去處理css,同上面處理.vue文件同樣)。
在 Plugin 配置中,新增了個 HappyPack 實例分別用於告訴 happypack/loader 去如何處理.vue。選項中的 id 屬性的值和上面 querystring 中的 ?id=vue相對應,選項中的 loaders 屬性和 Loader 配置中同樣。webpack
接入 HappyPack 後,你須要給項目安裝新的依賴:web
npm i -D happypack
在實例化 HappyPack 插件的時候,除了能夠傳入 id
和 loaders
兩個參數外,HappyPack
還支持以下參數:npm
threads
表明開啓幾個子進程去處理這一類型的文件,默認是3個,類型必須是整數。verbose
是否容許 HappyPack
輸出日誌,默認是 true。threadPool
表明共享進程池,即多個 HappyPack 實例都使用同一個共享進程池中的子進程去處理任務,以防止資源佔用過多。