Rollup打包集成Terser进行JS压缩的配置方法

假设你正在使用 Rollup 构建一个面向生产环境的 SDK 或前端工具库，代码编写完成后执行打包，发现生成的文件虽然通过 Tree-shaking 剔除了未使用代码，但内部仍然包含大段空白符、格式缩进、冗长语义化的变量名以及开发测试时打印的 console.log 调试代码。这不仅增大了最终产物的网络传输体积，也将内部实现细节无保留地暴露在浏览器中。要在 Rollup 中解决该问题，最标准且可靠的方案就是集成 Terser 压缩引擎。本文将详细讲解官方插件的选型、安装命令、配置编写步骤、高级混淆参数设定及常见问题排查方法，帮助读者完成规范的生产级压缩配置。

一、插件选型与集成架构解析

在开始配置前，需要明确 Rollup 生态中 Terser 插件的包名沿革。早期社区广泛使用的是 rollup-plugin-terser，但在 Rollup 官方对核心插件统一归拢维护后，当前推荐且长期维护的官方包已迁移为 @rollup/plugin-terser。对于使用 Rollup 3.x 或 4.x 的现代工程，必须使用 @rollup/plugin-terser，避免因旧包在模块解析规范及生命周期钩子上的差异导致兼容性报错。

从底层工作机制来看，Rollup 主要负责模块依赖拓扑的静态分析、代码拆分（Code Splitting）与摇树消除。而代码语法的深度优化（如变量符号缩短、常量折叠、冗余指令抹除）则交由 Terser 完成。Terser 在 Rollup 的输出阶段介入，针对即将落盘的代码块执行抽象语法树（AST）重写。

二、标准配置实施步骤

在项目中集成并运行 Terser 包含四个标准操作步骤：安装开发依赖、创建或修改配置文件、配置插件实例、运行构建并检查产物。操作过程中保持各配置项路径与模块规范一致即可快速生效。

步骤一：安装依赖包

在项目根目录的终端中执行以下命令，将 @rollup/plugin-terser 安装为开发依赖：

# 使用 npm
npm install --save-dev @rollup/plugin-terser

# 或使用 pnpm
pnpm add -D @rollup/plugin-terser

# 或使用 yarn
yarn add -D @rollup/plugin-terser

说明：@rollup/plugin-terser 已经内置或在其 peerDependencies 中声明了 terser。如果项目有极其特殊的 Terser 版本锁定需求，也可以显式安装指定版本的 terser，通常情况下直接安装插件包即可。

步骤二：创建并编写 Rollup 配置文件

在工程根目录下创建 rollup.config.mjs（Node.js 推荐以 .mjs 显式声明 ES 模块）。若使用 package.json 中包含 "type": "module"，也可以命名为 rollup.config.js。

以下是基础集成代码示例：

// rollup.config.mjs
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'esm', // 输出格式，可为 esm, cjs, umd, iife 等
    sourcemap: true // 开启 SourceMap 映射
  },
  plugins: [
    // 基础调用：执行默认压缩与变量混淆
    terser()
  ]
};

三、核心配置项与高级混淆策略

直接调用无参的 terser() 会启用 Terser 默认的精简规则，但这通常不能完全满足复杂的生产需求。在实际项目中，我们往往需要剔除调试语句（如 console.log、debugger）、保护特定的方法名或函数名不被改写，以及规范最终输出文件的版权声明。可以通过向 terser(options) 传递配置对象来实现精准控制。

以下是一份适用于生产构建的完整推荐配置示例：

// rollup.config.mjs
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'umd',
    name: 'MyLibrary',
    sourcemap: true
  },
  plugins: [
    terser({
      // 1. 代码逻辑压缩与死码剔除
      compress: {
        drop_console: true,        // 生产环境抹除 console.*
        drop_debugger: true,       // 抹除 debugger
        pure_funcs: ['console.log'], // 显式移除 log 语句
        passes: 2                  // 执行两轮优化，榨干冗余代码
      },
      // 2. 标识符名称混淆
      mangle: {
        toplevel: true,            // 混淆顶层变量名称
        keep_classnames: false,    // 不保留类名（若反射机制依赖需设为 true）
        keep_fnames: false         // 不保留函数名
      },
      // 3. 输出格式化控制
      format: {
        comments: false,           // 清除所有普通注释
        preamble: '/* Build by Rollup & Terser - Copyright 2026 */' // 注入文件头部版权声明
      },
      // 4. 调试映射
      sourcemap: true              // 生成对应的 sourcemap 索引
    })
  ]
};

四、配置层级选择：构建级 plugins 与产物级 output.plugins

在 Rollup 中，插件可以配置在两个不同层级：根级对象的 plugins 数组，或者 output 对象的 output.plugins 数组。理解这两者的差异是构建多格式产物（例如同时输出未压缩版 bundle.js 和压缩版 bundle.min.js）的关键。

在开源工具库项目中，通常要求既发布未经混淆但已打包的源码供开发调试，也发布经过 Terser 极致压缩的 .min.js 供 CDN 直接引入。此时应该使用 output.plugins 配置：

// rollup.config.mjs 双产物配置模式
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/index.js',
  output: [
    // 产物 1：语义化未压缩版本（保留换行与符号，方便断点与阅读）
    {
      file: 'dist/index.esm.js',
      format: 'esm',
      sourcemap: true
    },
    // 产物 2：生产压缩版本（启用 Terser）
    {
      file: 'dist/index.esm.min.js',
      format: 'esm',
      sourcemap: true,
      plugins: [
        terser({
          compress: { drop_console: true },
          mangle: { toplevel: true }
        })
      ]
    }
  ]
};

五、构建验证与结果检验

配置完成后，在 package.json 中添加对应的构建脚本，或者直接使用 npx 触发：

// package.json 片段
{
  "scripts": {
    "build": "rollup -c"
  }
}

在终端执行构建命令：

$ npm run build

> my-lib@1.0.0 build
> rollup -c

src/index.js → dist/index.esm.js, dist/index.esm.min.js...
created dist/index.esm.js, dist/index.esm.min.js in 420ms

构建成功后，在文件管理器或终端中比对 dist/ 目录下的输出产物：

• 体积表现：以一个包含依赖的常用数学库为例，未压缩的 index.esm.js 大小约为 28 KB，而经 Terser 处理后的 index.esm.min.js 通常可降至 9 KB 左右（减幅超 60%）。
• 内容结构：打开 .min.js 文件，所有多行变量均被转换为短字符（如 const calculateTotal = ... 变成 const a = ...），console.log 已完全消失，顶部规范保留预设的版权声明。
• SourceMap 映射校验：打开浏览器的开发者工具（DevTools），将 .min.js 载入页面，确认可以在 Sources 面板中通过映射反查到 src/index.js 的源码行号，说明混淆后的 SourceMap 索引生成无误。

六、高频注意事项与排错指南

在将 Terser 深度集成至大型工程中时，往往会遇到一些容易被忽视的技术细节。以下列出四项关键注意点及排查方案：

const isProd = process.env.NODE_ENV === 'production';

export default {
  input: 'src/index.js',
  output: { file: 'dist/bundle.js', format: 'esm' },
  plugins: [
    isProd && terser()
  ].filter(Boolean)
};

七、总结

在 Rollup 项目中引入 @rollup/plugin-terser 是构建生产就绪 JavaScript 代码不可或缺的收尾步骤。通过在 output.plugins 中合理配置 compress、mangle 和 format 选项，开发者可以在彻底抹除调试代码与冗余空白的同时，大幅度降低文件体积，并生成配套的 SourceMap 文件以便于生产问题排查。掌握这一配置流程，有助于在保证代码安全与网络传输效率的前提下，构建出工业级的前端与 Node.js 发行包。