生产环境用更小的文件，调试时看可读的代码
这个工具为生产环境压缩 CSS、JavaScript 和 HTML，并准确显示你节省了多少：原始大小、压缩后大小，以及 gzip 后的大小——也就是访问者真正下载的大小。JavaScript 使用 terser 压缩，它是大多数现代构建工具采用的压缩器；CSS 使用 csso 压缩，它还会合并重复的规则。切换到“格式化”，即可把压缩过的 bundle 或样式表还原为带缩进的可读代码。代码在你的浏览器中处理，绝不会上传。
如何压缩或格式化代码
- 1选择语言：CSS、JavaScript 或 HTML。把
.css、.js或.html文件拖到输入框会自动选择。 - 2选择压缩来缩小代码，或选择格式化来整理代码。
- 3调整选项：JavaScript 可选择是否混淆变量名和压缩；CSS 可选择是否重构规则；HTML 可选择是否压缩内联样式和脚本。许可证注释默认保留，除非你关闭它。
- 4查看结果下方的大小，了解 gzip 前后的节省量。
- 5复制输出，或下载为
.min.js、.min.css或.html。
压缩做了什么
压缩会删除浏览器运行代码时不需要的一切：注释、缩进、换行和可省略的分号。好的压缩器做得更多。terser 会把局部变量重命名为单个字母（mangling），删除不可达代码，预先计算常量表达式，并把 if 语句缩写为三元表达式。csso 会缩短颜色（#ff0000 变成 red），去掉零值的单位，并合并声明或选择器相同的规则。
结果的行为与原始代码完全一致，但在压缩传输前，JavaScript 通常会小 30–70%，CSS 会小 15–40%。
为什么 gzip 大小很重要
Web 服务器和 CDN 在发送文本文件前会用 gzip 或 Brotli 压缩，所以影响加载时间的是压缩后的大小，而不是原始大小。gzip 本身已经去掉了压缩器所针对的大部分重复内容，因此代码压缩节省的 60% 在 gzip 后可能只剩 20%。但这在每次页面访问时依然值得，尤其是变量名混淆在 gzip 后仍然有效。
这里的 gzip 数值采用 6 级，这是 nginx 和大多数服务器的默认值。Brotli 通常还能再小 10–20%。
选项说明
- 混淆变量名
- 把局部变量和函数参数重命名为短名称。全局名称和对象属性永远不会被重命名，所以被其他脚本调用的代码仍能正常工作。
- 压缩
- 对 JavaScript 而言，是 terser 的优化步骤：删除死代码、常量折叠、内联。对 CSS 而言，是 csso 的重构，在安全的情况下合并并重排规则。
- 保留许可证注释
- 保留以 /*! 开头或包含 @license、@preserve 的注释，许多开源许可证要求保留这些注释。
- 内联 CSS 和 JS
- 在 HTML 中压缩 <style> 和 <script> 元素的内容以及 style 属性。JSON-LD 块也会被紧凑化；其他类型的脚本保持不变。
- 移除属性引号
- 在 HTML 允许的地方，把 class="nav" 写成 class=nav。这是合法的 HTML，但某些 XML 工具和模板系统不支持，因此默认关闭。
HTML 如何压缩
这里的 HTML 压缩刻意保守。注释会被删除，但 Internet Explorer 条件注释除外。连续的空白会合并为一个空格，而 <div>、<p> 等块级元素旁边永远不会显示的空白会被删除。内联元素之间始终保留一个空格，否则 <b>big</b> <i>world</i> 会连成一个词。<pre> 和 <textarea> 的内容永远不会被改动。
如果某个内联脚本有语法错误，它会原样保留，并告诉你错误所在的行，而不是让整个页面处理失败。
格式化压缩后的代码
格式化使用 js-beautify 重新缩进代码：JavaScript 每行一条语句，CSS 每行一条声明，HTML 使用嵌套缩进。这是阅读压缩过的第三方脚本、或看懂从浏览器复制的样式表的最快方法。格式化无法恢复压缩器删除的原始变量名和注释，但结构会变得清晰易懂。
其他格式请使用 JSON 格式化与校验和 SQL 格式化工具。
常见问题
- 我的代码会被上传吗？
- 不会。terser、csso 和 js-beautify 都在你的浏览器中运行，代码始终留在你的设备上。
- 压缩后的 JavaScript 还能正常运行吗？
- 能。terser 只做不改变行为的修改。如果代码在运行时依赖函数名或类名（例如某些依赖注入框架），可能需要关闭变量名混淆。
- 支持现代 JavaScript 和 ES 模块吗？
- 支持。terser 理解现代语法，包括 class、async/await、可选链和顶层 await。含有 import 或 export 语句的文件会作为 ES 模块压缩。
- 能压缩 TypeScript 或 JSX 吗？
- 不能。请先把 TypeScript 或 JSX 编译成 JavaScript，再压缩输出结果。如果代码不是纯 JavaScript，会显示带行号和列号的语法错误。
- 代码压缩和 gzip 有什么区别？
- 代码压缩是把代码本身改写得更短。gzip 是服务器在发送任何文件时进行的压缩。两者配合使用：先压缩代码，再让服务器进行 gzip。
- 可以反压缩 JavaScript 或 CSS 吗？
- 可以。选择“格式化”即可重新缩进压缩后的代码。原始变量名和注释无法恢复，但结构会变得可读。
- 为什么我的 CSS 规则被合并或重新排序了？
- 这是 csso 的重构功能，它会合并声明或选择器相同的规则。对普通样式表来说是安全的；如果你依赖特异性相同的选择器之间的精确规则顺序，请关闭“压缩”。