代码压缩工具
在一个工具里压缩 JavaScript（Terser）、CSS（CSSO）、HTML、JSON 或 XML：选择语言、粘贴代码，即可看到节省的字节数。免费，在浏览器中运行。
输出
完全在浏览器中运行，您的数据不会被上传。
相关工具
查看全部什么是 代码压缩？
代码压缩工具让你在同一个地方压缩多种语言。选择 JavaScript、CSS、HTML、JSON 或 XML，它就会应用相应的压缩器，并显示压缩前后的体积。
如何使用 代码压缩
- 选择 语言。
- 把代码粘贴到输入框中。
- 点击 压缩（输入时输出也会更新）。
- 复制或下载压缩后的代码。
示例
输入
a { color : red ; } 输出
a{color:red} 语言：CSS。
何时使用 代码压缩
适合快速的一次性压缩和体积对比。对于生产应用，请在构建流程中压缩并生成 source map。各个专用压缩工具页面对每种引擎有更详细的说明。
代码压缩 的工作原理
每种语言都使用专用引擎：JavaScript——带压缩和局部名称混淆的 Terser；CSS——先检查大括号和字符串，再用 CSSO 做结构压缩；HTML——一个安全的压缩器，删除注释并合并空白，但不改动 pre、textarea、script 和 style；JSON——严格解析后紧凑输出，保留数字原样；XML——先检查格式是否正确，再删除标签之间的空白和注释。
常见用例
- 在内联到页面之前压缩代码片段
- 比较不同版本代码的体积
- 压缩 JSON 或 XML 数据
- 分享代码前先删除注释
安全提示
所有处理都在你的浏览器本地完成，粘贴的代码不会被上传。
常见问题
默认选中哪种语言？
JavaScript。可以通过语言选择器更改。
会生成 source map 吗？
不会。
能压缩 TypeScript 吗？
不能，请先把 TypeScript 编译成 JavaScript。
推荐的下一步
转义/反转义工具
一个工具搞定字符串转义与反转义：支持 JSON、JavaScript、HTML、XML、URL 组件、正则表达式、SQL 字面量、CSS 字符串和 Shell 参数。
CSS 选择器测试器
针对粘贴的 HTML 测试 CSS 选择器，查看每个匹配元素的标记和文本。使用 querySelectorAll，因此结果与浏览器完全一致。
CSS 盒阴影生成器
可视化构建 CSS box-shadow：叠加多层阴影，设置偏移、模糊、扩展、内阴影和 RGBA 不透明度，实时预览并复制简洁的代码。
CSS 渐变生成器
设计线性、径向和锥形 CSS 渐变，支持可拖动色标、角度、重复模式和 OKLCH 插值。实时预览并复制代码。
CSS Flexbox 生成器
可视化设置弹性容器的方向、换行、主轴与交叉轴对齐、间距，以及每个项目的伸缩、顺序和自身对齐，实时显示子项并可复制 CSS。
CSS Grid 生成器
可视化构建 CSS Grid 布局：grid-template-columns/rows、带校验的命名区域、间距、对齐和每个项目的定位，复制简洁的 CSS。