webpack優化之HappyPack 實戰

大飯糰CC發表於2018-04-20
Web優化APP

由於執行在 Node.js 之上的 Webpack 是單執行緒模型的，所以Webpack 需要處理的事情需要一件一件的做，不能多件事一起做。 我們需要Webpack 能同一時間處理多個任務，發揮多核 CPU 電腦的威力，HappyPack 就能讓 Webpack 做到這點，它把任務分解給多個子程式去併發的執行，子程式處理完後再把結果傳送給主程式。

由於 JavaScript 是單執行緒模型，要想發揮多核 CPU 的能力，只能通過多程式去實現，而無法通過多執行緒實現。

提示：由於HappyPack 對file-loader、url-loader 支援的不友好，所以不建議對該loader使用。

安裝 HappyPack

npm i -D happypack
複製程式碼

執行機制

HappyPack_Workflow.png

使用 HappyPack

修改你的webpack.config.js 檔案

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        //把對.js 的檔案處理交給id為happyBabel 的HappyPack 的例項執行
        loader: 'happypack/loader?id=happyBabel',
        //排除node_modules 目錄下的檔案
        exclude: /node_modules/
      },
    ]
  },
plugins: [
    new HappyPack({
        //用id來標識 happypack處理那裡類檔案
      id: 'happyBabel',
      //如何處理  用法和loader 的配置一樣
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true',
      }],
      //共享程式池
      threadPool: happyThreadPool,
      //允許 HappyPack 輸出日誌
      verbose: true,
    })
  ]
}
複製程式碼
  • 在 Loader 配置中，所有檔案的處理都交給了 happypack/loader 去處理，使用緊跟其後的 querystring ?id=babel 去告訴 happypack/loader 去選擇哪個 HappyPack 例項去處理檔案。
  • 在 Plugin 配置中，新增了兩個 HappyPack 例項分別用於告訴 happypack/loader 去如何處理 .js 和 .css 檔案。選項中的 id 屬性的值和上面 querystring 中的 ?id=babel 相對應，選項中的 loaders 屬性和 Loader 配置中一樣。

HappyPack 引數

  • id: String 用唯一的識別符號 id 來代表當前的 HappyPack 是用來處理一類特定的檔案.
  • loaders: Array 用法和 webpack Loader 配置中一樣.
  • threads: Number 代表開啟幾個子程式去處理這一型別的檔案，預設是3個，型別必須是整數。
  • verbose: Boolean 是否允許 HappyPack 輸出日誌，預設是 true。
  • threadPool: HappyThreadPool 代表共享程式池，即多個 HappyPack 例項都使用同一個共享程式池中的子程式去處理任務，以防止資源佔用過多。
  • verboseWhenProfiling: Boolean 開啟webpack --profile ,仍然希望HappyPack產生輸出。
  • debug: Boolean 啟用debug 用於故障排查。預設 false。

總結

如果想詳細瞭解happypack的原理 可以看這篇文章 happypack 原理解析

相關文章