webpack優化 -- happypack

webpack優化 -- happypack

前言：happypack是一個能夠開啓多線程轉換loader的插件，能夠在開發環境下提升編譯速度，下面用vue-cli 2.x配合happypack優化一下vue項目。😄

步驟

下載安裝happypack

在本文中，vue-cli是2.x版本的(不是3.0版本)，webpack是3.6.0，happypack是最新的5.0.1。

//安裝
npm install happypack -D

改造webpack

找到build/webpack.base.conf.js, 修改module.rules的內容，並添加plugins屬性

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

//修改後
module:{
    rules:[
        {
            test: /\.vue$/,
            loader: 'happypack/loader?id=vue'
        },
        ......
    ]
},

//新增的plugins配置
plugins:[
    new HappyPack({
      id:'vue',
      loaders:[
        {
          loader:'vue-loader',
          options:vueLoaderConfig  //*
        }
      ]
    }),
    ......
]

上面只給出vue的配置，其餘的loader改造都是同樣的，注意原來在rules裏面的options選項要放在new HappyPack裏面配置，否則會報錯的。

問題

該插件並不完美，目前在處理圖片的時候，就有bug,因此目前不建議在處理圖片的loader上使用happypack。😅 具體bug請查看