深入淺出的webpack構建工具---ParallelUglifyPlugin優化壓縮(十)

webpack默認提供了UglifyJS插件來壓縮JS代碼，但是它使用的是單線程壓縮代碼，也就是說多個js文件需要被壓縮，它需要一個個文件進行壓縮。所以說在正式環境打包壓縮代碼速度非常慢(因為壓縮JS代碼需要先把代碼解析成用Object抽象表示的AST語法樹，再去應用各種規則分析和處理AST，導致這個過程耗時非常大)。
使用 UglifyJS 壓縮代碼如下：

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
  ]
}

上一節介紹的HappyPack的思想是使用多個子進程去解析和編譯JS,css,等，這樣就可以並行處理多個子任務，多個子任務完成后，再將結果發到主進程中，有了這個思想后，因此 ParallelUglifyPlugin 插件就產生了，當webpack有多個JS文件需要輸出和壓縮時候，原來會使用UglifyJS去一個個壓縮並且輸出，但是ParallelUglifyPlugin插件則會開啟多個子進程，把對多個文件壓縮的工作分別給多個子進程去完成，但是每個子進程還是通過UglifyJS去壓縮代碼。無非就是變成了並行處理該壓縮了，並行處理多個子任務，效率會更加的提高。

1. 安裝 webpack-parallel-uglify-plugin 插件
命令如下安裝：

npm i -D webpack-parallel-uglify-plugin

然后在webpack.config.js 配置代碼如下：

// 引入 ParallelUglifyPlugin 插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

module.exports = {
  plugins: [
    // 使用 ParallelUglifyPlugin 並行壓縮輸出JS代碼
    new ParallelUglifyPlugin({
      // 傳遞給 UglifyJS的參數如下：
      uglifyJS: {
        output: {
          /*
           是否輸出可讀性較強的代碼，即會保留空格和制表符，默認為輸出，為了達到更好的壓縮效果，
           可以設置為false
          */
          beautify: false,
          /*
           是否保留代碼中的注釋，默認為保留，為了達到更好的壓縮效果，可以設置為false
          */
          comments: false
        },
        compress: {
          /*
           是否在UglifyJS刪除沒有用到的代碼時輸出警告信息，默認為輸出，可以設置為false關閉這些作用
           不大的警告
          */
          warnings: false,

          /*
           是否刪除代碼中所有的console語句，默認為不刪除，開啟后，會刪除所有的console語句
          */
          drop_console: true,

          /*
           是否內嵌雖然已經定義了，但是只用到一次的變量，比如將 var x = 1; y = x, 轉換成 y = 5, 默認為不
           轉換，為了達到更好的壓縮效果，可以設置為false
          */
          collapse_vars: true,

          /*
           是否提取出現了多次但是沒有定義成變量去引用的靜態值，比如將 x = 'xxx'; y = 'xxx'  轉換成
           var a = 'xxxx'; x = a; y = a; 默認為不轉換，為了達到更好的壓縮效果，可以設置為false
          */
          reduce_vars: true
        }
      }
    }),
  ]
}

在通過 new ParallelUglifyPlugin() 實列化時，支持以下參數配置如下：

test: 使用正則去匹配哪些文件需要被 ParallelUglifyPlugin 壓縮，默認是 /.js$/.
include: 使用正則去包含被 ParallelUglifyPlugin 壓縮的文件，默認為 [].
exclude: 使用正則去不包含被 ParallelUglifyPlugin 壓縮的文件，默認為 [].
cacheDir: 緩存壓縮后的結果，下次遇到一樣的輸入時直接從緩存中獲取壓縮后的結果並返回，cacheDir 用於配置緩存存放的目錄路徑。默認不會緩存，想開啟緩存請設置一個目錄路徑。

workerCount：開啟幾個子進程去並發的執行壓縮。默認是當前運行電腦的 CPU 核數減去1。
sourceMap：是否為壓縮后的代碼生成對應的Source Map, 默認不生成，開啟后耗時會大大增加，一般不會將壓縮后的代碼的
sourceMap發送給網站用戶的瀏覽器。
uglifyJS：用於壓縮 ES5 代碼時的配置，Object 類型，直接透傳給 UglifyJS 的參數。
uglifyES：用於壓縮 ES6 代碼時的配置，Object 類型，直接透傳給 UglifyES 的參數。

因此 使用 ParallelUglifyPlugin 實列會有以下參數配置項：

new ParallelUglifyPlugin({
  uglifyJS: {},
  test: /.js$/g,
  include: [],
  exclude: [],
  cacheDir: '',
  workerCount: '',
  sourceMap: false
});