happypack提高項目構建速度

happypack提高項目構建速度

前言

最近在看《深刻淺出webpack》看到了happypack。就想起公司一vue項目，每次項目啓動都將近2分鐘。等的實在讓人不耐煩，都夠我支付寶偷一波能量了。就本身實踐了下，事實證實是有效的。原平均構建速度爲1分55秒（5次），使用happypack後平均構建速度爲1分45秒（5次）。我只修改了對.vue文件的處理，以下實戰代碼，節省了10秒仍是不錯滴。

happypack

因爲有大量文件須要解析和處理，構建是文件讀寫和計算密集型的操做，特別是當文件數量變多後，Webpack 構建慢的問題會顯得嚴重。 運行在 Node.js 之上的 Webpack 是單線程模型的，也就是說 Webpack 須要處理的任務須要一件件挨着作，不能多個事情一塊兒作。happypack把任務分解給多個子進程去併發的執行，子進程處理完後再把結果發送給主進程。

實戰(代碼來自構建將近2分鐘的項目）

修改前代碼

// ...

module: {
    // ...
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: vueLoaderConfig
    },
  ]
},
plugins: []

修改後代碼

// ...
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 配置中同樣。

接入 HappyPack 後，你須要給項目安裝新的依賴：

npm i -D happypack

在實例化 HappyPack 插件的時候，除了能夠傳入 id 和 loaders 兩個參數外，HappyPack 還支持以下參數：

• threads 表明開啓幾個子進程去處理這一類型的文件，默認是3個，類型必須是整數。
• verbose 是否容許 HappyPack 輸出日誌，默認是 true。
• threadPool 表明共享進程池，即多個 HappyPack 實例都使用同一個共享進程池中的子進程去處理任務，以防止資源佔用過多。