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

龍恩0707發表於2018-09-01
WebParallelPlugin優化

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
});

相關文章