背景介绍
前端开发中，代码的压缩和混淆是非常必要的工作，可以有效的减少网络传输的数据量和保护代码的安全性。而 uglier 就是一个非常优秀的 JS 源码混淆库，是由 Terser 团队开发的，uglify-js 的升级版。
安装
通过 npm 包管理工具安装 uglier：
npm i -D uglify-js
使用方法
可通过命令行直接使用，也可以将 uglier 集成到构建工具中。以下是一些常见的使用方法。
命令行直接使用
- 压缩 JS 文件
npx uglifyjs myfile.js -o myfile.min.js
这里 myfile.js 是需要压缩的源文件，myfile.min.js 是目标文件，压缩后的文件会输出到 myfile.min.js 中。
- 压缩多个 JS 文件
npx uglifyjs file1.js file2.js -o bundle.min.js
这里 file1.js 和 file2.js 是需要压缩的源文件，bundle.min.js 是目标文件，压缩后的文件会输出到 bundle.min.js 中。
- 压缩目录下所有 JS 文件
npx uglifyjs path/to/dir -o bundle.min.js -c -m
这里 path/to/dir 是源文件所在目录，bundle.min.js 是目标文件，-c 和 -m 分别表示进行尽可能的代码压缩和混淆。压缩后的文件会输出到 bundle.min.js 中。
集成到构建工具中
- gulp 中使用
-- -------------------- ---- -------
--- ---- - ----------------
--- ------ - -----------------------
------------------- ---------- -
-- ----
--------------------------
---------------
----------------------------
-- ----
---------------------------- -------------------
---------------
------------------------------
----------------------------
---这里 gulp-uglify 是用来压缩 JS 文件的插件，通过 pipe() 方法将 JS 文件传递给 uglify 插件进行压缩。
- webpack 中使用
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
-- ------- --
-------- -
--- ----------------
-------------- -
--------- -
------------- ----
-
-
--
-
-这里 UglifyJsPlugin 是 webpack 中用来压缩 JS 文件的插件，可以在压缩时传递一些选项参数。在这里，我们将 drop_console 设置为 true，表示移除控制台中的调试语句。
总结
uglier 是一个非常好用的 JS 代码混淆库，可以大大地减少 JS 文件大小，提高页面加载速度。我们可以通过命令行和构建工具将其应用到项目中。其中，集成到构建工具中可以更加灵活地对 JS 文件进行压缩和混淆，建议大家在项目中进行使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583a34