JavaScript压缩器与美化器
使用可自定义选项压缩或美化JavaScript代码
JavaScript压缩器与美化器文档
这是什么工具？
JavaScript 压缩从 JS 源代码中删除空白、注释和不必要的标记，同时保留运行时语义。不同于 CSS，JS 压缩必须遵守自动分号插入（ASI）规则：删除某些语句间的换行符可能会悄然改变程序行为。本工具采用保守的空白删除方式，保留所有 ASI 敏感换行符，同时完整删除注释（// 和 /* */），不修改字符串和正则表达式字面量内容。
核心功能
- 空白和注释删除：删除所有语句间空白、空行、// 单行注释和 /* */ 多行注释。保留字符串字面量、模板字面量和正则表达式字面量内的空白。
- ASI 安全换行处理：在以 (、[、/、+、- 开头的语句之前保留换行符，防止 ASI 触发的行为变化。
- 不进行变量重命名：与生产级压缩器（Terser、UglifyJS）不同，本工具不将局部变量重命名为单个字母，以避免客户端工具无法安全实现的完整 AST 分析。
- ES6+ 和现代语法支持：处理箭头函数、解构赋值、模板字面量、可选链（?.）、空值合并（??）和类语法，作为文本级转换器运行。
- 可配置美化器：使用 2 空格、4 空格或制表符重新缩进；在 {、}、; 之后和 // 注释之前恢复换行；规范化引号样式。
常见用途
- 开发调试：将生产压缩的 JS（React、Vue、Angular 包）粘贴到美化器中，在没有 source map 的情况下检查组件结构或定位函数定义。
- 快速一次性压缩：缩减 HTML 页面中的内联 JS 或小型脚本块，无需配置 Webpack/Rollup 构建链。
- 安全分析和代码审查：美化混淆或压缩的第三方脚本，评估页面加载的代码；检查分析片段或 A/B 测试脚本。
- 大小估算：比较压缩前后的字节数，估算专用压缩器（Terser）与仅空白删除相比能进一步减少多少。
如何使用 JavaScript 压缩与美化工具
工具支持两种模式：压缩（Minify）通过删除注释和不必要空白缩减文件大小；美化（Beautify）将紧凑或难以阅读的代码重新格式化为一致缩进。
压缩 JavaScript 代码：
- 将 JavaScript 源代码粘贴到输入面板，或使用文件上传按钮上传 .js 文件。
- 点击“压缩”按钮。工具在保留字符串内容和 ASI 安全换行的同时删除空白和注释。
- 复制压缩输出或下载为 .js 文件。输出面板下方显示大小缩减百分比。
格式化/美化 JavaScript 代码：
- 将压缩或格式混乱的 JavaScript 粘贴到输入面板。
- 在选项面板中选择首选缩进样式（2 空格、4 空格或制表符），然后点击“美化”。
- 格式化输出出现在输出面板中。复制或下载结果以进一步编辑。
为什么要压缩 JavaScript？
JavaScript 压缩减少了向浏览器传送的脚本文件大小，缩短了首字节时间（TTFB）和可交互时间（TTI）。仅空白压缩通常减少 20-40%，结合变量重命名（Terser）可实现 40-65% 的减少。Gzip 叠加压缩 JS 还可额外节省 60-75% 的传输大小。
压缩 JS 还减少了 V8/SpiderMonkey 的解析时间：JavaScript 引擎必须对每个字节进行分词和解析，因此字节越少，解析和编译越快。对于蜂窝网络移动设备，每 KB 的节省都能明显改善首次输入延迟（FID）和下一次绘制的交互（INP）Core Web Vitals 分数。
美化功能的具体调整
美化器从压缩或紧凑的 JavaScript 重建可读的缩进，处理嵌套函数、类和控制结构，不执行代码。
- 可配置缩进：2 空格、4 空格或制表符
- 在 {、}、; 之后和 // 注释之前插入换行
- 引号样式规范化：转换单引号/双引号/反引号
- 嵌套函数和类结构以递增缩进级别保留
压缩功能的具体调整
压缩应用多个文本级转换通道，减少字节数而不改变运行时行为。
- 删除所有 // 单行注释（整行和行尾）
- 删除所有 /* */ 多行注释（包括 JSDoc 块）
- 删除或折叠语句间空白和空行
- 保留 (、[、/、+、- 之前的 ASI 敏感换行
- 字符串、模板字面量和正则表达式字面量内容保持不变
预估文件大小影响
仅文本级压缩（空白+注释）通常实现未压缩 JS 源码 20-40% 的减少。加入变量重命名（Terser）可实现总减少 40-65%。Gzip 叠加可额外减少 60-75% 的传输大小，对典型应用包来说合并为相对原始未压缩源的 85-90% 减少。