在前端开发中，JS 代码的体积越来越大，这不仅会影响页面加载速度，也会浪费用户的流量。为了解决这个问题，我们可以使用 uglifyjs-webpack-plugin 来压缩 JS 代码。
什么是 uglifyjs-webpack-plugin？
uglifyjs-webpack-plugin 是一个可以帮助我们在 webpack 中压缩 JavaScript 代码的插件。它可以将 JavaScript 代码压缩、混淆，并删除无用代码和注释，进一步优化代码体积，提高网页性能。
如何使用 uglifyjs-webpack-plugin？
首先，我们需要安装 uglifyjs-webpack-plugin：
npm install --save-dev uglifyjs-webpack-plugin
然后，在 webpack 的配置文件中引入 uglifyjs-webpack-plugin，并添加到 plugins 列表中即可。具体配置如下：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
-- ---
-------- -
-- ------ -----------------------
--- ----------------
-
--配置项及说明
uglifyjs-webpack-plugin 提供了一系列配置项，以满足不同的应用场景。下面是一些常用的配置项及说明：
test
- 类型：
/test|include|exclude/ - 默认值：
/.js$/
指定要压缩和混淆的 JavaScript 文件的匹配模式。可以是一个正则表达式，一个文件名、目录名字符串的函数，也可以是一个匹配模式的数组。
举例来说，如果我们只需要压缩 src/js/ 目录下的所有 JavaScript 文件，可以这样配置：
new UglifyJsPlugin({
test: /\/src\/js\//
})include 和 exclude
- 类型：
String|RegExp|Array<String|RegExp> - 默认值：
undefined
用于指定要包含或要排除的文件或文件夹。可以使用字符串、正则表达式或一个匹配模式的数组。
new UglifyJsPlugin({
include: /\.min\.js$/,
exclude: /\/node_modules/
})cache
- 类型：
Boolean|String - 默认值：
false
指定是否启用缓存，如果启用了缓存将会大大减少重新打包时间。你可以使用一个字符串来指定 webpack 的缓存目录。
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
})parallel
- 类型：
Boolean|Number - 默认值：
false
配置是否使用多进程并发执行来提高构建速度，或者使用数字来指定并行执行的任务数。
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
})sourceMap
- 类型：
Boolean - 默认值：
false
是否生成 source map 文件，当开启 optimize.jsSourceMap 选项时，此选项默认为 true。
new UglifyJsPlugin({
sourceMap: true
})示例代码
下面是一个使用 uglifyjs-webpack-plugin 的示例：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
------ ----------------
------- -
--------- ------------
----- --------- - -------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- --
------- ---------------
-------- -
-------- -------
-
--
-
-
--
-------- -
--- ----------------
-
--上面的代码中，我们先使用 babel-loader 将 ES6 代码转化为 ES5 代码，然后使用 UglifyJsPlugin 压缩混淆 JavaScript 代码，最后输出到 dist 目录下的 bundle.js 文件中。
总结
uglifyjs-webpack-plugin 是一个非常实用的 webpack 插件。它可以帮助我们轻松地对 JavaScript 代码进行压缩、混淆等操作，从而使代码更小，加载速度更快。在实际开发中，我们可以根据项目需要进行一些更高级的配置，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472a893968c7c53b0046f12