全面掌握 rollup-plugin-terser：高效压缩 JavaScript 代码的终极指南

全面掌握 rollup-plugin-terser：高效压缩 JavaScript 代码的终极指南

【免费下载链接】rollup-plugin-terser Rollup plugin to minify generated bundle 项目地址: https://gitcode.com/gh_mirrors/ro/rollup-plugin-terser

rollup-plugin-terser 是一个专为 Rollup 构建工具设计的插件，它通过 Terser 压缩引擎来最小化生成的 ES 模块包。无论您是前端开发新手还是经验丰富的工程师，本教程都将帮助您快速上手并深入掌握这个强大的代码压缩工具。

快速入门指南

环境准备与安装

首先确保您的项目中已经安装了 Rollup（版本 0.66 或更高，包括 2.0.0）。然后通过以下命令安装 rollup-plugin-terser：

# 使用 npm 安装
npm install rollup-plugin-terser --save-dev

# 或使用 yarn 安装  
yarn add rollup-plugin-terser --dev

基础配置示例

在 Rollup 配置文件中，您需要正确导入并使用该插件：

import { terser } from "rollup-plugin-terser";

export default {
  input: "main.js",
  output: {
    file: "bundle.min.js",
    format: "cjs"
  },
  plugins: [terser()]
};

核心功能深度解析

自动格式检测与优化

rollup-plugin-terser 能够智能地根据输出格式自动设置最佳压缩选项：

• ESM 格式：当输出格式为 esm 或 es 时，插件会自动设置 module: true
• CommonJS 格式：当输出格式为 cjs 时，插件会自动设置 toplevel: true

多工作进程支持

插件内置了多进程处理能力，默认会启动 CPU 核心数减 1 的工作进程：

terser({
  numWorkers: 4  // 手动指定工作进程数量
})

高级配置技巧分享

保留重要注释

在某些情况下，您可能需要保留许可证信息或其他重要注释：

terser({
  format: {
    comments: function (node, comment) {
      const text = comment.value;
      const type = comment.type;
      if (type == "comment2") {
        return /@preserve|@license|@cc_on/i.test(text);
      }
    }
  }
})

作为输出插件使用

您可以选择性地只在特定输出配置中启用压缩：

export default {
  input: "index.js",
  output: [
    { file: "lib.js", format: "cjs" },
    { file: "lib.min.js", format: "cjs", plugins: [terser()] },
    { file: "lib.esm.js", format: "esm" },
  ],
};

最佳实践推荐

1. 错误处理与调试

当压缩过程中出现错误时，插件会提供详细的错误定位信息：

try {
  // 正常的 Rollup 构建流程
} catch (error) {
  console.error("压缩失败:", error.message);
}

2. 性能优化配置

根据项目规模调整工作进程数量：

• 小型项目：使用默认配置
• 大型项目：根据 CPU 核心数手动设置 numWorkers

3. 兼容性考虑

确保您的 Terser 配置与目标浏览器环境兼容。插件使用的 Terser 版本为 5.0.0 及以上，支持现代 JavaScript 特性。

4. 源码映射处理

插件会自动从 Rollup 配置中推断是否需要生成源码映射，无需手动设置 sourceMap 选项。

5. 名称缓存优化

利用名称缓存功能提高重复构建的性能：

const nameCache = {};

terser({
  nameCache: nameCache,
  // 其他配置...
})

通过本教程的学习，您已经掌握了 rollup-plugin-terser 的核心用法和高级技巧。这个插件不仅能显著减小您的代码包体积，还能保持代码的功能完整性，是现代前端工程化中不可或缺的工具之一。

【免费下载链接】rollup-plugin-terser Rollup plugin to minify generated bundle 项目地址: https://gitcode.com/gh_mirrors/ro/rollup-plugin-terser