JavaScript 压缩与格式化工具

工具介绍

JavaScript 压缩会在保持行为完全一致的前提下把代码改写得尽可能小：在安全的情况下缩短变量和函数名、删除注释和空白、合并常量、去掉不可达的代码。

本工具基于 Terser——webpack、Vite、Rollup 等主流构建工具内置的同款压缩引擎。因为它真正解析代码而不是做文本匹配，所以能正确区分除号和正则表达式字面量，不会破坏模板字符串里长得像 // 的内容，也不会把变量重命名成和外层作用域冲突的名字。

为什么使用它？

• 基于语法树（AST）的压缩引擎 Terser，主流打包工具同款——正则表达式、模板字符串和闭包都能安全处理。
• 会真正混淆变量名以获得实际体积收益，而不只是删空白。
• 直接显示节省的字节数和百分比。
• 格式化模式可以把混淆成一行的压缩 JS 还原成带缩进的可读代码，便于理解第三方脚本。
• 全程本地处理——私有代码不会离开浏览器。

使用方法

1. 把 JavaScript 粘贴到输入框，或点击「加载示例」体验一段带正则表达式和模板字符串的示例。
2. 点击「压缩」进行压缩，或点击「格式化」以 2 空格缩进美化代码。
3. 查看输入框下方的提示：压缩模式会显示体积缩减比例；代码有语法错误会直接显示明确的提示，而不是悄悄生成损坏的结果。
4. 点击「复制」获取结果。

示例

输入

function greet(name) {
  const pattern = /^[a-z]+$/i;
  const msg = `Hello, ${name}!`;
  if (pattern.test(name)) {
    // simple check
    return msg;
  }
  return "Hi there";
}

输出

function greet(n){const e=/^[a-z]+$/i,g=`Hello, ${n}!`;return e.test(n)?g:"Hi there"}

变量名被缩短，注释和 if 语句被折叠成一个表达式，但正则表达式和模板字符串原样保留，行为完全不变。

实用建议

• 在构建阶段压缩，而不是手动改代码——保留可读的源码放进版本控制，压缩产物作为构建步骤生成。
• 如果压缩后的产物出现异常，检查代码是否依赖 Function.prototype.name 或反射相关特性——混淆会重命名函数，个别情况下可能露出问题。
• 阅读第三方脚本前先格式化，比硬啃一行 2000 个字符的代码快得多。
• 如果需要打包完整的静态站点，可以配合下方的 HTML、CSS 压缩工具一起使用。

在实际工作流中的位置

JavaScript 通常是页面上最大的、会阻塞渲染或解析的资源，所以压缩它对加载时间的实际影响比 HTML 或 CSS（按字节算）更明显。多数现代框架在构建时会自动完成这一步，但手写脚本、浏览器扩展和书签小工具往往没有经过压缩，除非有人手动用这类工具处理一遍。

格式化方向常反过来用：从压缩过的堆栈跟踪排查线上报错时，先把周围代码格式化还原、变得可读，即使拿不回原始变量名，调试也会顺利很多。

→ HTML 压缩工具 · CSS 压缩工具

常见使用场景

• 发布前给独立脚本或书签小工具瘦身。
• 还原从线上网站拿到的压缩脚本，了解它的实际逻辑。
• 在仔细阅读之前，先整理论坛帖子或 AI 生成的 JavaScript 片段。
• 快速检查手写 JS 片段是否有语法错误，解析失败会直接显示明确的提示。

常见问题