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

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

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

（1）UglifyJS

支持： babel present2015、webpack3

缺點：

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

優(yōu)點： 老項目支持（兼容 IOS10）

使用：

npm i uglifyjs-webpack-plugin

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

【推薦學(xué)習(xí)：javascript高級教程】

（2）webpack-parallel-uglify-plugin

支持： babel7、webpack4

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

優(yōu)點：

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

使用：

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的參數(shù)如下：
uglifyJS: {
output: {
/*
 是否輸出可讀性較強的代碼，即會保留空格和制表符，默認為輸出，為了達到更好的壓縮效果，
 可以設(shè)置為false
*/
beautify: false,
/*
 是否保留代碼中的注釋，默認為保留，為了達到更好的壓縮效果，可以設(shè)置為false
*/
comments: false
},
compress: {
/*
 是否在UglifyJS刪除沒有用到的代碼時輸出警告信息，默認為輸出，可以設(shè)置為false關(guān)閉這些作用
 不大的警告
*/
warnings: false,

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

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

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

3、說明

• test: 使用正則去匹配哪些文件需要被 ParallelUglifyPlugin 壓縮，默認是 /.js$/.

• include: 使用正則去包含被 ParallelUglifyPlugin 壓縮的文件，默認為 [].

• exclude: 使用正則去不包含被 ParallelUglifyPlugin 壓縮的文件，默認為 [].

• cacheDir: 緩存壓縮后的結(jié)果，下次遇到一樣的輸入時直接從緩存中獲取壓縮后的結(jié)果并返回，cacheDir

• 用于配置緩存存放的目錄路徑。默認不會緩存，想開啟緩存請設(shè)置一個目錄路徑。

• workerCount：開啟幾個子進程去并發(fā)的執(zhí)行壓縮。默認是當(dāng)前運行電腦的 CPU 核數(shù)減去1。

• sourceMap：是否為壓縮后的代碼生成對應(yīng)的Source Map, 默認不生成，開啟后耗時會大大增加，一般不會將壓縮后的代碼的

• sourceMap發(fā)送給網(wǎng)站用戶的瀏覽器。

• uglifyJS：用于壓縮 ES5 代碼時的配置，Object 類型，直接透傳給 UglifyJS 的參數(shù)。

• uglifyES：用于壓縮 ES6 代碼時的配置，Object 類型，直接透傳給 UglifyES 的參數(shù)。

4、ParallelUglifyPlugin 實列會有以下參數(shù)配置項：

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）

優(yōu)點：

• 和ParallelUglifyPlugin一樣，并行處理多個子任務(wù)，效率會更加的提高。

• 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

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