JavaScript 壓縮器

JavaScript 壓縮工具做的事情，其實非常具體：在不改變腳本執行行為的前提下，把同一段程式碼改寫成盡可能短的文字。它刪掉解析器並不需要的換行和空格、去掉註解，並在原本依賴換行的「隱式分號」位置補上明確分號，讓程式碼在傳輸、內嵌和快取時佔的位元組數更少。壓縮前後，腳本輸入相同時應該輸出相同；變化的只是檔案大小，而不是語義。

輕量壓縮與打包器深度最佳化的區別

现实里被叫做“压缩”的其实是两类完全不同的工具。一类是“轻量级”的：只动空白和注释，行为可证、风险极低，适用于任何片段，包括含有 `eval`、模板字符串、特殊字符串边界的代码。另一类是 Terser、esbuild、SWC 这样的“深度优化器”：它们除了删空白，还会重命名变量、剔除死分支、内联函数。这类优化需要一个完整可信的模块作为输入，否则容易在边界处误改。理解工具属于哪一类，是评估压缩结果时最先要做的事。

哪些字元可以刪，哪些是「承重」的

JavaScript 大部分位置对空白都是宽容的，但确实有几个地方，空格和换行直接影响语义。任何认真写出来的压缩工具，都是在严格识别“哪些空白可以删、哪些不能删”的基础上工作的。

• 可以刪的：運算式或語句內部、兩側 token 已經能自行區分的空白，例如 `a + b` 可以壓成 `a+b`。
• 可以删的：独立注释、空行、纯粹为人服务的缩进。
• 承重的：`return` 和後續運算式如果在同一行，它們之間的空白不可缺，否則 ASI（自動分號插入）的結果會變。
• 承重的：字符串字面量、模板字符串、正则字面量里的每一个字符。这些是用户数据，不属于排版。
• 承重的：紧跟在以 `(`、`[`、`/`、`+`、`-` 开头的新语句前的换行，否则前一行可能被解析器误判为继续上一行。

一句話原則：如果刪掉某個空白或換行會改變解析器的分詞結果，那它就是「承重字元」，必須保留——即便看上去和普通空白完全一樣。

如何使用這個工具

1. 先在 JavaScript 壓縮器 中准备一份有代表性的需要更紧凑輸出的 JavaScript 片段、辅助函数和内联脚本，不要一开始就處理最大或最敏感的真实内容。
2. 执行處理流程并產生更小、更適合嵌入的壓縮 JavaScript 文字后，優先檢查字元串、注释、分号边界、正则字面量，以及輸出是否仍適合目標运行时，再判断结果是否真的可用。
3. 只有当结果已经適合用于内联嵌入、快速构建准备、片段分享和紧凑脚本交接，并且不再触发這条风险提醒时，才複製或下载輸出：壓縮后的 JavaScript 更难审，所以进入生产前應先以可读版本完成複核。

JavaScript 壓縮器 範例

這個 JavaScript 壓縮器 示例使用有代表性的需要更紧凑輸出的 JavaScript 片段、辅助函数和内联脚本，展示產生后的更小、更適合嵌入的壓縮 JavaScript 文字，便于你先確認字元串、注释、分号边界、正则字面量，以及輸出是否仍適合目標运行时，再把同样設定用于真实輸入。

範例輸入

function add(a, b) { return a + b; }

預期輸出

function add(a,b){return a+b}

一次安全壓縮前後的程式碼

// 压缩前
function greet(name) {
  // 没有传名字时用一个回退值
  const safe = name || "friend";
  return "Hello, " + safe + "!";
}

// 压缩后
function greet(name){const safe=name||"friend";return"Hello, "+safe+"!"}

什麼時候適合做這種輕量壓縮

这种“只动空白”的轻量压缩，最适合那些不能或者不需要引入完整打包链路的场景。在以下这些情境里，它的安全性和易用性比深度优化更重要。

• 嵌入在 HTML 郵件、行銷登陸頁、靜態模板中的內聯腳本：腳本位元組隨頁面一起發出去，壓縮直接帶來傳輸收益。
• 存放在 CMS 或标签管理系统里的脚本片段：每条记录都自带一份，临时改动也很频繁，体积小一些每次加载都会更顺。
• 在聊天、工单、文档里分享 JavaScript 片段：紧凑形式比十几行缩进版本更容易快速阅读。
• 在决定“是把它写进内联，还是抽到外部文件”之前，先用压缩看看真实体积有多大，给体积预算一个参考。
• 为博客、幻灯片、演示文稿生成紧凑的代码示例：目标是短小好放，不是极致优化。

輕量壓縮特別容易踩的坑

“只动空白”的压缩出问题，往往不在算法本身，而在原始代码依赖了一些压缩工具看不见的上下文。下面这些类别，是当你看到“源代码没事，压缩版崩了”时最值得先怀疑的。

• ASI 自動分號插入：`return` 單獨佔一行、後面的 `{` 在下一行，等價於 `return undefined;`，不是 `return { ... }`。壓縮工具如果把它們合併到一行，就改變了行為。這類問題在偵錯器裡幾乎看不到，必須靠程式碼風格規避。
• 许可证或编译器注解：例如 `/*! ... */`、`// @license`、`/*#__PURE__*/` 这类注释具有法律或编译器层面的含义。一个合格的压缩工具会按惯例保留它们。
• 模板字符串：反引号字符串里的换行是值的一部分，不能当作排版处理。压缩工具不能动反引号内部的任何字符。
• 紧邻除法的正则字面量：`a / b / c` 和 `a / b /c/.test(x)` 形态相似但分词完全不同，`/` 周围的换行或空格有时正是消除歧义的关键。
• 依赖 Source Map 进行线上排错的脚本：激进压缩但不生成 Source Map，会让线上报错的定位代价显著上升。生产链路里建议把这一步交给会同时产出 Source Map 的工具。

輕量壓縮與深度最佳化的對照

使用注意

• 複用更小、更適合嵌入的壓縮 JavaScript 文字前，先檢查字元串、注释、分号边界、正则字面量，以及輸出是否仍適合目標运行时。
• 壓縮后的 JavaScript 更难审，所以进入生产前應先以可读版本完成複核。
• 当结果会影响生产工作或客户可见内容时，應保留原始需要更紧凑輸出的 JavaScript 片段、辅助函数和内联脚本以便回退和核对。

JavaScript 壓縮器 參考說明

JavaScript 壓縮器 的参考說明應始终围绕需要更紧凑輸出的 JavaScript 片段、辅助函数和内联脚本、產生的更小、更適合嵌入的壓縮 JavaScript 文字，以及用于内联嵌入、快速构建准备、片段分享和紧凑脚本交接前必须確認的檢查点。

• 輸入重点：需要更紧凑輸出的 JavaScript 片段、辅助函数和内联脚本。
• 輸出重点：更小、更適合嵌入的壓縮 JavaScript 文字。
• 複核重点：字元串、注释、分号边界、正则字面量，以及輸出是否仍適合目標运行时。

參考資料

• ECMAScript Language Specification
• MDN: JavaScript reference