webpack中常用的JS壓縮插件有哪些

這篇文章給大家分享的是有關webpack中常用的JS壓縮插件有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

這里 講解 三種JS 打包插件：

（1）UglifyJS

支持： babel present2015、webpack3

缺點：

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

優點： 老項目支持（兼容 IOS10）

使用：

npm i uglifyjs-webpack-plugin

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

【推薦學習：javascript高級教程】

（2）webpack-parallel-uglify-plugin

支持： babel7、webpack4

缺點： 老項目不支持（不兼容 IOS10）

優點：

ParallelUglifyPlugin插件則會開啟多個子進程，把對多個文件壓縮的工作分別給多個子進程去完成，但是每個子進程還是通過UglifyJS去壓縮代碼。無非就是變成了并行處理該壓縮了，并行處理多個子任務，效率會更加的提高。

使用：

1、npm i -D webpack-parallel-uglify-plugin

2、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
}
}
}),
]
}

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

感謝各位的閱讀！關于“webpack中常用的JS壓縮插件有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！