在前端开发中，代码压缩几乎是必不可少的步骤，它可以大幅度地减小代码的体积，加快前端网页的加载速度，同时也可以保护代码的知识产权。本文将介绍如何利用 webpack 对 JS 代码进行压缩，让你的网页更快地载入和更加安全的运行。
webpack 的代码压缩插件
webpack 是一个开源的前端打包工具，它的优势之一就是可以对 JS 代码进行打包和压缩。webpack 引入了 UglifyJSPlugin 插件来压缩代码，这是当前最流行的 JS 压缩工具之一。要使用这个插件，你需要先安装它。
npm install uglifyjs-webpack-plugin --save-dev
之后，只需要在 webpack 的配置文件中进行配置即可。打开 webpack.config.js，添加以下代码：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
-- ---
------------- -
---------- -
--- ----------------
--------- -----
------ -----
---------- -----
---
--
--
--这段代码中，我们引入了 UglifyJSPlugin，并将它作为 webpack 的一个优化插件来使用。同时，我们可以自定义一些参数，例如 parallel 表示使用多个进程并行处理打包任务，cache 表示使用缓存减少打包时间，sourceMap 表示保留原始的源代码映射，方便调试。
webpack 的代码混淆插件
最常用的代码混淆工具就是 UglifyJS，它可以对代码进行无损压缩，优化代码结构，混淆变量名等等。但遗憾的是，代码混淆并不能真正地保护你的知识产权，因为反混淆（也叫解密）一样可以还原出原始代码。
不过，还有一个名为 webpack-obfuscator 的插件，它可以对代码进行混淆，并增加了一些防反混淆的机制。它的使用也非常简单，只需要先安装它：
npm install webpack-obfuscator --save-dev
然后在 webpack 的配置文件中进行配置即可。打开 webpack.config.js，添加以下代码：
-- -------------------- ---- -------
----- ---------------- - ------------------------------
-------------- - -
-- ---
-------- -
--- ------------------
-- -------------- --- -------
-------- ---------
-- ----------
----------- -
-- -------
---------------------- -----
------------------------------- -----
--------------------- -----
--------- -----
------------------- -----
------------- -----
--------------------- -----
--
---
--
--这段代码中，我们引入了 webpack-obfuscator 插件，并将它作为 webpack 的一个插件来使用。其中 obfuscator 选项是对混淆机制的一些设置，例如 controlFlowFlattening 表示是否对代码进行控制流平坦化（增加代码的复杂性），同时还可以使用其他参数来增加代码的混淆程度。exclude 选项表示哪些文件不需要混淆，这里我们以 .js 结尾的文件为例。
总结
在本文中，我们介绍了如何使用 webpack 的 UglifyJSPlugin 插件对 JS 代码进行压缩，同时还介绍了 webpack-obfuscator 插件对代码进行混淆的方式。代码压缩和混淆是保护知识产权，加速网页加载速度的非常重要的工具，掌握好它们，将让你成为更出色的前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484519b48841e989436b3fb