這篇文章要為大家詳細介紹一下webpack中的3種常用JS壓縮外掛程式。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
這裡講解三種JS 打包外掛：
##支援： babel present2015、webpack3
#缺點：##它使用的是單執行緒壓縮程式碼，也就是說多個js檔案需要被壓縮，它需要一個個檔案來壓縮。所以說在正式環境打包壓縮程式碼速度非常慢(因為壓縮JS程式碼需要先把程式碼解析成用Object抽象表示的AST語法樹，再去應用各種規則分析和處理AST，導致這個過程耗時非常大) 。
優點：舊專案支援（相容IOS10）
#使用：npm i uglifyjs-webpack- plugin
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">module.exports = {
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
]
}</pre><div class="contentsignin">登入後複製</div></div>【推薦學習：
babel7、webpack4
舊專案不支援（不相容IOS10）
優點：ParallelUglifyPlugin外掛程式會開啟多個子進程，把對多個檔案壓縮的工作分別給多個子進程去完成，但是每個子進程還是通過UglifyJS去壓縮程式碼。無非就是變成了平行處理該壓縮了，並行處理多個子任務，效率會更加的提升。
使用：1、
npm i -D webpack-parallel-uglify-plugin2、
檔案<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">// 引入 ParallelUglifyPlugin 插件
const ParallelUglifyPlugin = require(&#39;webpack-parallel-uglify-plugin&#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 = &#39;xxx&#39;; y = &#39;xxx&#39; 转换成
var a = &#39;xxxx&#39;; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
*/
reduce_vars: true
}
}
}),
]
}</pre><div class="contentsignin">登入後複製</div></div>3、說明
new ParallelUglifyPlugin({
uglifyJS: {},
test: /.js$/g,
include: [],
exclude: [],
cacheDir: '',
workerCount: '',
sourceMap: false
});5、github位址（https://github.com/gdborton/webpack-parallel- uglify-plugin）
babel7、webpack4缺點：
優點：
和ParallelUglifyPlugin一樣，並行處理多個子任務，效率會更加的提升。
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
}
})
]
}更多程式相關知識，請造訪：
程式設計影片
以上是詳解3種webpack中常用的JS壓縮插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
