webpack4學習筆記——優化部分（happypack與webpack自帶優化）

happypack

happypack可利用多線程對文件進行打包(默認cpu核數-1)，對多核cpu利用率更高。
new Happypack(options)可生成對應的loader,如配置：

new Happypack({
   id: 'js',
   use: [{
     loader: 'babel-loader',
     options: {
       cacheDirectory: true
     }
   }]
 }),
 new Happypack({其餘loader配置})

在js的loader中配置:

use:[{
   loader: 'Happypack/loader',
   options: {
       id: 'js'
     }
}],

則js的打包可利用多線程。
注意，項目較小時，多線程打包反而會使打包速度變慢。
* 注：關於多線程打包，老版本webpack利用webpack.optimize.UglifyJsPlugin進行文件壓縮，此插件爲單線程，可利用ParallelUglifyPlugin插件實現多線程壓縮 *

拿一個老項目測試happypack時發現一個的問題，module.rules.use本該傳入一個[array],但傳入{object}也不會報錯，但打包速度差異很大

代碼1：

use:[{
  loader: 'babel-loader',
  options: {
    cacheDirectory: true
  }
}],

代碼2：

use:{
  loader: 'babel-loader',
  options: {
    cacheDirectory: true
  }
},

同一個項目，代碼1配置比代碼2配置快了十幾秒，官方文檔上也沒找到緣由。。

---

webpack自帶優化

tree-shaking

webpack生產環境會自動刪除未使用的代碼，如：

import math from 'xx'
math.add(1,2)

生產環境下，打包後的代碼中,將不會打包除add之外的math方法。
注意，此項只對import生效，若直接是const math=require('xx').default,仍是會打包math中的全部內容。

scope hosting 做用域提高

webpack打包時會自動省略能夠簡化的部分，如：

let a=1,b=2,c=3
let d=a+b+c
console.log(d)

打包後的代碼直接是：

console.log(6)