在前端开发过程中，往往需要对 JavaScript 代码进行压缩以减少文件大小，提升页面加载速度。uglify-js2 是一个流行的 npm 包，可以对 JavaScript 代码进行压缩混淆，并提供了丰富的 API，方便我们进行二次开发。本文将详细介绍 uglify-js2 的使用方法和注意事项。
安装
在使用 uglify-js2 前，需要先安装它。在命令行中输入以下命令即可安装：
--- ------- ---------- ----------
安装完成之后，就可以在项目中使用它了。
压缩 JavaScript 代码
使用 uglify-js2 压缩 JavaScript 代码非常简单。只需要引入模块，然后调用 minify 方法即可。具体代码如下：
----- -------- - ---------------------- ----- ---- - ---- ---- - ------------- ------------------- - - -------- ----- ------ - ---------------------- -------------------------
上面的代码定义了一段 JavaScript 代码，并调用了 uglify-js2 的 minify 方法进行压缩。压缩后的代码将输出到命令行中。如果需要将压缩后的代码保存到文件中，可以使用 writeFileSync 方法，如下：
----- -- - -------------- ------------------------------ -------------
混淆 JavaScript 代码
除了压缩代码之外，uglify-js2 还可以对 JavaScript 代码进行混淆。混淆代码可以让代码更加难以被阅读和理解，从而增加代码的安全性和隐私性。同样是使用 minify 方法，只需要将 mangle 属性设置为 true，即可实现代码混淆。具体如下：
----- -------- - ---------------------- ----- ---- - ---- ---- - ------------- ------------------- - - -------- ----- ------ - --------------------- - ------- ----- --- -------------------------
上面的代码中，mangle 属性被设置为 true，表示对 JavaScript 代码进行混淆。运行结果如下：
--- ---------------------------------- -----
通过对比压缩前后的代码，可以发现 uglify-js2 已经将原来的变量名 name 替换为了一个更短、难以阅读的变量名 n。
根据选项定制化压缩和混淆
在实际开发过程中，我们可能需要根据不同的项目和需求，定制化压缩和混淆选项。uglify-js2 提供了一个丰富的选项列表，可以实现各种选项的组合、定制化、开关等。下面给出一些常用的选项示例：
去除注释
在压缩 JavaScript 代码时，通常需要将代码中的注释去掉。可以设置 compress 选项中的 comments 为 false，从而实现去除注释。具体代码如下：
----- -------- - ----------------------
----- ---- - --- ---- -- - ------- -- ------------------- -----------
----- ------ - --------------------- -
--------- -
--------- ------
--
---
-------------------------运行结果如下：
------------------- ---------
自动去掉 console 语句
在开发和调试阶段，我们通常会在代码中加入 console.log 等调试语句，以便查看变量值、输出调试信息等。但是，在将代码部署到生产环境中时，这些调试语句就不再需要了，需要将它们自动去掉。可以设置 compress 选项中的 drop_console 为 true，从而实现自动去除 console.log 等调试语句。具体代码如下：
----- -------- - ----------------------
----- ---- - -------------------- -----------
----- ------ - --------------------- -
--------- -
------------- -----
--
---
-------------------------运行结果如下：
-
可以看到，原来的 console.log 调试语句已经被成功去掉了，但是结果中仍然保留了一个空语句 ;。
保留特定的函数名和变量名
有时候，我们可能需要保留代码中的特定函数名和变量名，以便将来其他模块或组件能够正常访问它们。可以设置 mangle 选项中的 except 属性来实现。具体代码如下：
----- -------- - ----------------------
----- ---- - ---- ---- - ------------- ------------------- - - --------
----- ------ - --------------------- -
------- -
------- ------------
--
---
-------------------------上面的代码中，except 属性被设置为一个数组，其中包含了需要保留的函数名和变量名 console，表示不对它们进行混淆。运行结果如下：
--- - - ------------- ------------------- - - ---
通过对比上面的代码与不加 except 的代码，可以发现 console.log 函数名未进行混淆。
总结
uglify-js2 是一个功能强大、灵活性和性能都很好的 JavaScript 代码压缩混淆工具。通过本文的介绍，相信读者已经初步掌握了其常用的使用方法和选项。在实际开发中，使用 uglify-js2 对 JavaScript 代码进行压缩混淆，可以加快页面加载速度、保护代码安全和隐私，同时还可以更好地协作开发和管理项目。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb834b5cbfe1ea0611804