Webpack 是一个非常流行的前端打包工具，它可以将多个 JavaScript 文件打包成一个或多个文件，并能够处理各种类型的文件，如 CSS、图片等。然而，在打包过程中，我们往往会发现一个问题，就是打包后的文件大小较大，加载时间较长，这时我们就需要使用一个工具来将代码压缩，这就是 UglifyJsPlugin。
UglifyJsPlugin 简介
UglifyJsPlugin 是一个 Webpack 的插件，它可以帮助我们将 JavaScript 代码压缩，并去除未使用的代码，去掉注释等。这样做可以大大减小文件的体积，从而提高网页的加载速度。
如何使用 UglifyJsPlugin
在 Webpack 的配置文件中添加以下代码：
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
-- --- ----
------------- -
---------- -
--- ----------------
------ ----- -- ----
--------- ----- -- ------
---------- ------ -- -- ---------
-------------- -
--------- -
-- ------
------------- ---- -- -- -------
--
------- -
-- ------
--------- ----- -- ----
-
-
--
-
-
--UglifyJsPlugin 配置项详解
cache
使用缓存，默认为 false，设置为 true 可以启用缓存，提高打包速度。
parallel
启用并行压缩，默认为 false。当值为 true 时，将开启并行压缩，提高压缩速度。
sourceMap
启用 sourceMap，默认为 false。sourceMap 是一种映射关系，它能够将压缩后的代码映射回原始代码，方便调试。但是启用 sourceMap 会增加打包时间，也会增加打包文件的体积。
uglifyOptions
这里是 UglifyJS 的选项，可以用来配置压缩选项或输出选项。下面列出了一些常用的选项。
compress
配置压缩选项。常用选项如下：
- drop_console：去除 console 语句。
- drop_debugger：去除 debugger 语句。
- unused：去除未使用的代码。
- reduce_vars：合并相似的变量。
output
配置输出选项。常用选项如下：
- comments：去除注释。
- beautify：输出美化的代码。
- semicolons：是否需要分号，也可以是一个回调函数。
示例代码
-- -------------------- ---- -------
----- -------------- - -----------------------------------
-------------- - -
------ -----------------
------- -
--------- -----------
--
------------- -
---------- -
--- ----------------
------ ----- -- ----
--------- ----- -- ------
---------- ------ -- -- ---------
-------------- -
--------- -
------------- ---- -- -- -------
--
------- -
--------- ----- -- ----
-
-
--
-
-
--总结
使用 UglifyJsPlugin 可以优化 Webpack 打包后的代码，从而提高网页的加载速度。我们还可以通过配置选项来进一步控制压缩的结果。希望本文能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c7208410032fedd3909105