webpack優化之HappyPack

前言

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

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

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

安裝 HappyPack

npm install --save-dev happypack

運行機制

使用 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=happyBabel 去告訴 happypack/loader 去選擇哪個 HappyPack 實例去處理文件。

• 在 Plugin 配置中，新增了兩個 HappyPack 實例分別用於告訴 happypack/loader 去如何處理 .js 和 .css 文件。選項中的 id 屬性的值和上面 querystring 中的 ?id=happyBabel 相對應，選項中的 loaders 屬性和 Loader 配置中一樣。

HappyPack 參數

這些是在實例化插件時可以傳遞給插件的參數。 loaders是唯一必需的參數。

1. loaders: Array

用法和 webpack Loader 配置中一樣.
下列符號受到正式支持，並且都等效

{
  loaders: [
    // a string with embedded query for options
    'babel-loader?presets[]=es2015',

    {
      loader: 'babel-loader'
    },

    // "query" string
    {
      loader: 'babel-loader',
      query:  '?presets[]=es2015'
    },

    // "query" object
    {
      loader: 'babel-loader',
      query: {
        presets: [ 'es2015' ]
      }
    },

    // Webpack 2+ "options" object instead of "query"
    {
      loader: 'babel-loader',
      options: {
        presets: [ 'es2015' ]
      }
    }
  ]
}

2. id: String

Happypack唯一的標識符 id , loader使用它來知道應該與哪個plugin通信。

除非您定義了多個HappyPack插件，否則無需指定此名稱，在這種情況下，您將需要不同的ID來區分它們

默認為： "1"

3. threads: Number

代表開啟幾個子進程去處理這一類型的文件

這僅在執行初始構建時才有意義， 因為HappyPack之后將切換到同步模式（即在watch 模式下）

默認為： 3

4. threadPool: HappyThreadPool

代表共享進程池，即多個 HappyPack 實例都使用同一個共享進程池中的子進程去處理任務，以防止資源占用過多。
默認為： null

5. verbose: Boolean

啟用它可以將狀態消息從HappyPack記錄到STDOUT。
默認為： true

6. verboseWhenProfiling: Boolean

即使在webpack --profile運行時HappyPack仍能產生其輸出，請啟用此選項。

默認為： false

7. debug: Boolean

啟用它可以將診斷消息從HappyPack記錄到STDOUT。啟用debug 用於故障排查。

默認為： false

參考

• github —— happypack文檔