happypack提高項目構建速度

happypack提高項目構建速度

前言

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

happypack

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

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

修改前代碼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 插件的時候,除了能夠傳入 idloaders 兩個參數外,HappyPack 還支持以下參數:npm

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