缩小 CSS、JavaScript 和 HTML：原因和方法
您的网站发送的每个字节都需要时间来下载，并且在缓慢的移动连接上这些字节会累积起来。缩小是一种简单、无风险的方法，可以减少代码大小并加快页面速度 - 这是每个网站在上线之前都应该做的事情。下面是它的工作原理。
什么是缩小
缩小会删除浏览器运行代码不需要的所有内容：空格、换行符、注释，有时还包括长变量名。该代码执行完全相同的操作 - 只是更小。 50 KB CSS 文件可能会缩小到 35 KB 或更少，并且每个访问者的节省都会增加。
之前和之后
这个可读的CSS：
.button {
颜色：白色;
/* 主要号召性用语 */
padding: 10px;
}
缩小为：
.button{color:white;padding:10px}
相同的行为，更少的字节，评论消失。
如何缩小每种类型
- CSS：使用 CSS 缩小器缩小样式表。
- JavaScript：JavaScript minifier 压缩脚本（通常是页面上最大的文件）。
- HTML：HTML 压缩器 修剪标记。
保持可读源，缩小版本
黄金法则：编写并维护可读代码，然后仅缩小您部署的版本。切勿手动编辑缩小的文件 - 保留原始（“源”）文件用于开发并生成缩小的副本用于生产。如果您需要调试某人发送给您的缩小文件，我们的美化器会将其反转为可读形式。
为什么它对 SEO 很重要
页面速度是通过Core Web Vitals确认的排名因素，较小的文件意味着更快的加载 - 特别是在移动设备上。缩小是最容易获得速度的方法之一，而且缺点为零。将其与图像优化相结合，以获得最大的影响。
缩小、压缩、捆绑
这三者经常混淆。 缩小从源中删除不需要的字符。 压缩（Gzip 或 Brotli，由您的服务器应用）然后在传输过程中进一步缩小文件 - 以及两个堆栈，因此您可以同时执行这两个操作。 捆绑将许多文件合并为更少的请求。完全优化的网站会被缩小、压缩并合理捆绑。它们解决同一问题的不同部分：向浏览器提供更少的数据，更快。
源映射使缩小的代码保持可调试性
对于传送缩小代码的明显担忧是“如何调试它？”答案是源映射 - 配套文件，让浏览器开发工具将缩小的代码映射回您可读的原始代码。有了源映射，您就可以将小文件发送给用户，同时仍然根据实际变量名称和行号进行调试。大多数构建工具会自动生成它们；您可以保持开发者体验并获得性能优势。
使其成为构建的一部分，而不是手动步骤
每次部署之前手动缩小很容易出错并且容易忘记。在实际项目中，缩小是作为构建管道的一部分自动进行的，因此每个版本都默认进行优化。我们的在线压缩器非常适合快速一次性工作、学习或无需构建步骤的项目 - 但对于任何正在进行的事情，请将压缩融入到构建中，以便快速版本始终会淘汰。
底线
缩小会去除浏览器不需要的字节，缩小 CSS、JS 和 HTML，以获得更快的页面和更好的排名。保留可读的源代码，发送缩小的副本，然后您就可以免费获得速度优势——这是 Web 开发中最简单的性能习惯之一。
