介绍
在前端开发中，代码压缩是个重要的环节，它能够减少代码的大小，提升网页的加载速度。Webpack 是目前前端打包工具的翘楚，而 UglifyJsPlugin 作为它的插件之一，在对代码压缩方面表现得非常优秀。
本文主要讲解如何在 Webpack 中配置 UglifyJsPlugin 插件对代码进行压缩，并为读者提供一些实际的示例代码，希望读者通过阅读本文，能够掌握如何使用 Webpack 和 UglifyJsPlugin 进行代码压缩的技巧。
Webpack 配置 UglifyJsPlugin 的方法
首先，我们需要在 Webpack 中配置 UglifyJsPlugin 插件。在配置之前，我们需要先安装它。
npm install uglifyjs-webpack-plugin --save-dev
安装完成后，我们就可以在 Webpack 配置文件中引入它了。下面是一个简单的 Webpack 配置文件示例，它演示了如何在配置文件中配置 UglifyJsPlugin。
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------------- -
---------- -
--- ----------------
-
-
--在上面的配置中，我们首先引入了 UglifyJsPlugin，然后在 optimization.minimizer 选项中添加该插件的实例，使其进入代码压缩流程。UglifyJsPlugin 的配置非常简单，我们不需要进行任何复杂的操作，只需要像上面的配置那样，将该插件的实例添加到 Webpack 配置中即可。
UglifyJsPlugin 的详细配置
在实际项目中，我们可能需要对 UglifyJsPlugin 的一些选项进行配置，以达到更好地压缩代码的效果。下面是一些比较重要的选项：
uglifyOptions
uglifyOptions 是 UglifyJsPlugin 最重要的配置项之一，通过它我们可以控制代码压缩的细节。下面是一些常用的子选项：
- compress：用于压缩代码的选项，可以控制是否压缩各种类型的语法，如条件表达式、if 语句、函数调用、变量定义等等。
- mangle：用于混淆代码的选项，通过对代码变量名进行重命名，使得代码难以被人识别。
- output：用于控制代码输出的相关选项，如代码格式类型、保留注释、保留空格等。
下面是一个实际的 UglifyJsPlugin 配置示例：
-- -------------------- ---- -------
--- ----------------
-------------- -
--------- -
------- -----
---------- -----
--------- -----
--
------- -
--------- ----- ---------- ---------- ---------
--
------- -
--------- ------
--------- -----
-
-
--在上面的代码中，我们开启了 compress.unused 和 compress.dead_code，来删除无用代码和未执行的代码，从而缩小代码体积。我们也禁用了 warnings，让压缩过程更加静默。在 mangle.suboptions 中，我们指定了一些变量名不进行混淆，比如 $、require 等，避免出现错误或者混乱的代码。在 output.suboptions 中，我们禁止了美化输出，并且去除了注释。
exclude 和 include
exclude 和 include 是 UglifyJsPlugin 中用来排除或者选择哪些代码进行压缩的选项。
- exclude：用于指定哪些文件或者文件夹不进行压缩。
- include：用于指定哪些文件或者文件夹被压缩。
这两个选项可以有效地避免一些代码未被压缩的情况。下面是一个实际的 UglifyJsPlugin 配置示例：
new UglifyJsPlugin({
exclude: /node_modules/,
include: /src/
})在上面的代码中，我们排除了 node_modules 目录下的所有文件，而选择 src 目录下的所有文件进行压缩。
示例代码
下面是一个实际的 Webpack 配置文件示例。该示例中，我们设置了 UglifyJsPlugin 的压缩选项和排除选项，来对源码进行压缩。
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------------- -
---------- -
--- ----------------
-------------- -
--------- -
--------- ------
---------- -----
------------- -----
-------------- ----
--
------- -
--------- -----
-
--
-------- --------------
--
-
-
--总结
在本文中，我们讲解了如何在 Webpack 中配置 UglifyJsPlugin 进行代码压缩，并提供了一些实际的示例代码。希望读者通过阅读本文，能够掌握如何利用 Webpack 和 UglifyJsPlugin 对前端代码进行压缩的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd705095b1f8cacdcd8e33