詳解3種webpack中常用的JS壓縮插件

這篇文章要為大家詳細介紹一下webpack中的3種常用JS壓縮外掛程式。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

這裡講解三種JS 打包外掛：

#（1）UglifyJS

##支援： babel present2015、webpack3

#缺點：##它使用的是單執行緒壓縮程式碼，也就是說多個js檔案需要被壓縮，它需要一個個檔案來壓縮。所以說在正式環境打包壓縮程式碼速度非常慢(因為壓縮JS程式碼需要先把程式碼解析成用Object抽象表示的AST語法樹，再去應用各種規則分析和處理AST，導致這個過程耗時非常大) 。

優點：

舊專案支援（相容IOS10）

#使用：

npm i uglifyjs-webpack- plugin

<pre class="brush:js;toolbar:false">module.exports = { plugins: [ new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), ] }</pre>【推薦學習：

javascript高階教學

】

（2）webpack-parallel-uglify-plugin

支援：

babel7、webpack4

缺點：

舊專案不支援（不相容IOS10）

優點：

ParallelUglifyPlugin外掛程式會開啟多個子進程，把對多個檔案壓縮的工作分別給多個子進程去完成，但是每個子進程還是通過UglifyJS去壓縮程式碼。無非就是變成了平行處理該壓縮了，並行處理多個子任務，效率會更加的提升。

使用：

1、

npm i -D webpack-parallel-uglify-plugin

2、

webpack.config.js

檔案<pre class="brush:js;toolbar:false">// 引入 ParallelUglifyPlugin 插件 const ParallelUglifyPlugin = require(&amp;#39;webpack-parallel-uglify-plugin&amp;#39;); 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 = &amp;#39;xxx&amp;#39;; y = &amp;#39;xxx&amp;#39; 转换成 var a = &amp;#39;xxxx&amp;#39;; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false */ reduce_vars: true } } }), ] }</pre>3、說明

test: 使用正規去匹配哪些檔案需要被ParallelUglifyPlugin 壓縮，預設是/.js$ /.
include: 使用正規去包含被ParallelUglifyPlugin 壓縮的文件，預設為[].
exclude: 使用正規去不包含被ParallelUglifyPlugin 壓縮的文件，預設為[].
cacheDir: 快取壓縮後的結果，下次遇到一樣的輸入時直接從快取中取得壓縮後的結果並返回，cacheDir
用來設定快取存放的目錄路徑。預設不會緩存，想開啟緩存請設定一個目錄路徑。
workerCount：開啟幾個子程序去並發的執行壓縮。預設是目前運轉電腦的 CPU 核數減去1。
sourceMap：是否為壓縮後的程式碼產生對應的Source Map, 預設不生成，開啟後耗時會大幅增加，一般不會將壓縮後的程式碼的
sourceMap傳送給網站使用者的瀏覽器。
uglifyJS：用於壓縮 ES5 程式碼時的配置，Object 類型，直接透傳給 UglifyJS 的參數。
uglifyES：用於壓縮 ES6 程式碼時的配置，Object 類型，直接透傳給 UglifyES 的參數。
4、ParallelUglifyPlugin 實列會有以下參數設定項：

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

5、github位址（https://github.com/gdborton/webpack-parallel- uglify-plugin）

（3）terser-webpack-plugin

##支持：

babel7、webpack4缺點：

舊專案不支援（不相容IOS10）

優點：

和ParallelUglifyPlugin一樣，並行處理多個子任務，效率會更加的提升。

• webpack4官方推薦，有人維護。
使用：

npm install terser-webpack-plugin --save-dev

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        ecma: 5,
        warnings: false,
        parse: {},
        compress: {},
        mangle: true, // Note `mangle.properties` is `false` by default.
        module: false,
        output: null,
        toplevel: false,
        nameCache: null,
        ie8: false,
        keep_fnames: false,
        safari10: true
      }
    })
  ]
}

github位址： https://github.com/webpack-contrib/terser-webpack-plugin

更多程式相關知識，請造訪：程式設計影片

！ ！

以上是詳解3種webpack中常用的JS壓縮插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！