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

云和網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司成立與2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

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

（1）UglifyJS

支持：babel present2015、webpack3

缺點(diǎn)：

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

優(yōu)點(diǎn)：老項(xiàng)目支持（兼容 IOS10）

使用：

npm i uglifyjs-webpack-plugin

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

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

（2）webpack-parallel-uglify-plugin

支持： babel7、webpack4

缺點(diǎn)：老項(xiàng)目不支持（不兼容 IOS10）

優(yōu)點(diǎn)：

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

使用：

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

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

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

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

3、說明

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

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

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

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

• 用于配置緩存存放的目錄路徑。默認(rèn)不會(huì)緩存，想開啟緩存請(qǐng)?jiān)O(shè)置一個(gè)目錄路徑。

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

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

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

• uglifyJS：用于壓縮 ES5 代碼時(shí)的配置，Object 類型，直接透?jìng)鹘o UglifyJS 的參數(shù)。

• uglifyES：用于壓縮 ES6 代碼時(shí)的配置，Object 類型，直接透?jìng)鹘o UglifyES 的參數(shù)。

4、ParallelUglifyPlugin 實(shí)列會(huì)有以下參數(shù)配置項(xiàng)：

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

缺點(diǎn)：老項(xiàng)目不支持（不兼容 IOS10）

優(yōu)點(diǎn)：

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

• webpack4官方推薦，有人維護(hù)。

使用：

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)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！