代码压缩：它做什么以及何时费心

你的JavaScript文件是500KB。压缩后，它是150KB。文件的70%发生了什么？

主要是空白、注释和长变量名。人类需要但浏览器不需要的东西。

压缩移除什么

空白。 缩进、空行、额外空格。浏览器不需要它们。

注释。 对开发者有用，对浏览器不可见。消失了。

长名字。 calculateTotalPrice变成a。customerData变成b。相同逻辑，更少字符。

死代码。 有些压缩器移除从不执行的代码。

实际节省

对于JavaScript：

• 空白和注释：30-50%大小减少
• 变量重命名：另外10-30%
• 死代码移除：差异很大

对于CSS：

• 主要是空白和注释
• 更短的选择器有帮助但有风险（它们可能匹配其他元素）

对于HTML：

• 不那么显著的收益
• 通常只是空白移除

何时压缩

生产网站。 总是。更快的加载时间，更好的用户体验，更低的带宽成本。

API响应。 有时。JSON压缩节省带宽但使调试更难。

内部工具。 也许。开发速度可能比加载时间更重要。

何时不压缩

开发环境。 调试压缩代码很痛苦。保留source map或在开发期间不压缩。

可读性要求。 有些开源项目为教育目的保留可读代码。

小文件。 压缩1KB文件几乎什么都不节省，还增加构建复杂性。

超越压缩

Gzip/Brotli压缩。 压缩的代码压缩得更进一步。大多数服务器自动处理这个。

代码分割。 只加载每个页面需要的代码。比一个巨大的压缩包更好。

Tree shaking。 打包器移除未使用的导出。只导入你需要的。

这些技术结合。压缩，然后压缩，然后智能分割。

Source Map

压缩的代码不可读。a.b(c,d)在调试时什么都不告诉你。

Source map把压缩的代码连接回原始源。你的浏览器开发工具在运行压缩代码时显示可读代码。

在开发中保留source map。根据你是否希望用户看到你的源代码来决定是否部署到生产环境。

常见问题

变量名损坏。 压缩器有时会破坏需要保持完整的名称（如字符串中的API密钥）。配置排除项。

顺序相关的CSS。 激进的CSS压缩可能重新排序规则并改变样式层叠方式。

异步问题。 激进的死代码移除可能破坏动态加载的代码。

部署前测试压缩构建。未压缩的有效代码在处理后可能会破坏。

---

压缩是廉价的性能。构建工具自动处理它。设置一次，永远享受更小的文件。