這里 講解 三種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}}),] }

---

(2)webpack-parallel-uglify-plugin

支持： babel7、webpack4

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

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

使用：

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

說明

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

github地址

---

(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压缩插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。