介绍
在前端开发中，JavaScript 是一门常用的编程语言，而 Rollup 是一个常用的 JavaScript 模块打包工具，可以将多个模块打包成一个文件，减小了文件大小，提高了网页的加载速度。但是，在项目构建时，会生成大量的 JavaScript 代码，这将增加网页的加载时间，降低用户体验。因此，我们需要对 JavaScript 代码进行压缩和优化，以减小文件大小和提高性能。
rollup-plugin-uglify 是一个 Rollup 插件，用于将已经打包好的 JavaScript 文件进行压缩和混淆。它使用 UglifyJS2 进行压缩和优化，并支持 ES6+ 语法和 Tree Shaking 特性，可以非常方便地集成到 Rollup 打包过程中。
安装
使用 npm 安装 rollup-plugin-uglify：
npm install rollup-plugin-uglify --save-dev
使用
在 Rollup 配置文件中引入该插件：
-- -------------------- ---- -------
------ - ------ - ---- -----------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
--------
-
--这样，在 Rollup 执行打包时，会自动将输出的 JavaScript 文件进行压缩和混淆。
配置选项
rollup-plugin-uglify 支持多个配置选项，可以根据实际情况进行设置：
compress: 对代码进行压缩的选项。默认值为 true。mangle: 对代码进行混淆的选项。默认值为 true。output: 压缩后的代码输出选项，用于指定生成的 JavaScript 文件的格式和内容。默认为一个空对象。
以下是一个完整的 Rollup 配置文件示例，包含了 rollup-plugin-uglify 的所有配置选项：
-- -------------------- ---- -------
------ - ------ - ---- -----------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
--------
--------- -
------------- -----
----------- ---------------
--
------- -
----------- -
------ ----
-
--
------- -
--------- -----
-
--
-
--在上面的配置中，我们使用了 compress 选项将 console.log() 函数从代码中删除，并使用了 mangle 选项将所有以 _ 开头的属性名进行混淆。同时，我们还使用了 output 选项将压缩后的代码中的注释全部删除。
示例代码
以下是一个简单的示例代码，用于演示 rollup-plugin-uglify 的使用：
// src/index.js
function add(a, b) {
return a + b;
}
console.log(add(1, 2));执行 Rollup 打包后，生成的压缩后的代码如下所示：
function add(n,d){return n+d}console.log(add(1,2));结论
rollup-plugin-uglify 是一个非常实用的 Rollup 插件，可以帮助我们对 JavaScript 代码进行优化和压缩，提高网页的加载速度和用户体验。在使用该插件时，需要注意其配置选项，根据实际情况进行设置和调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41300