webpack優化之HappyPack 實戰

因爲運行在 Node.js 之上的 Webpack 是單線程模型的，因此Webpack 須要處理的事情須要一件一件的作，不能多件事一塊兒作。 咱們須要Webpack 能同一時間處理多個任務，發揮多核 CPU 電腦的威力，HappyPack 就能讓 Webpack 作到這點，它把任務分解給多個子進程去併發的執行，子進程處理完後再把結果發送給主進程。

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

提示：因爲HappyPack 對file-loader、url-loader 支持的不友好，因此不建議對該loader使用。

安裝 HappyPack

npm i -D happypack
複製代碼

---

運行機制

---

使用 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 原理解析