代码压缩是什么?
代码压缩工具会压缩 JavaScript、CSS 和 HTML,通过去掉浏览器运行时不需要的注释、空白和其他字符来缩减文件体积。代码的功能完全不变,只是变得更小 —— 因此页面下载更快,占用的带宽也更少。
它专为想要拿到生产可用产物、又不想安装构建工具的前端和 Web 开发者打造。选择一个语言标签,粘贴代码,压缩结果便会自动出现,并附带实时压缩统计。JavaScript 由 Terser 处理,CSS 和 HTML 则采用有针对性的规则,保留那些必须原样留存的部分。
如何压缩你的代码
选择语言
在顶部选择 JavaScript、CSS 或 HTML 标签。每个标签都会加载对应的引擎和各自的一套选项。
粘贴或上传代码
在左侧的输入面板中输入或粘贴,或使用上传从你的设备载入文件。点击示例即可填入当前语言的示例代码。
调整选项
在工具栏中调整各语言专属的选项 —— 例如 JavaScript 的重命名变量和压缩优化,或 HTML 的合并空白。一旦你更改设置,输出便会重新压缩。
查看并导出
结果会带着语法高亮显示在右侧,统计栏则展示原始体积、压缩后体积和节省量。然后复制输出,或将其下载为文件。
功能特性
基于 Terser 的 JavaScript
用 Terser 压缩现代 ES6+ 代码,可切换重命名变量、压缩优化、移除 console 和移除 debugger。
CSS 压缩
移除注释、合并空白、缩短十六进制颜色并优化零值,同时保持 calc() 原样不变。
HTML 压缩
去掉注释、合并空白,并可选地移除可选闭合标签和多余的属性引号。
自动压缩
输出会随你的输入自动更新,并带有防抖处理,因此永远不会落后于你的输入。
压缩统计
每次运行后查看原始体积、压缩后体积和精确的节省百分比。
语法高亮输出
压缩结果用 Prism.js 高亮显示,保持可读,而不是挤成密密麻麻的一行。
上传与下载
直接从你的设备载入文件,并以正确的扩展名下载压缩后的输出。
一键复制与示例
立即把结果复制到剪贴板,或载入内置的示例代码来试用每种语言。
100% 本地处理
所有处理都在你的浏览器中进行,因此你的代码绝不会离开你的设备。
各语言的选项
JavaScript
CSS
HTML
常见问题
什么是代码压缩?
代码压缩会去掉浏览器运行代码时不需要的一切 —— 注释、多余空白和可选语法 —— 而不改变代码的功能。结果是一个更小的文件,加载和解析都更快。
压缩代码能提升页面速度吗?
能。更小的 JavaScript、CSS 和 HTML 文件下载更快,也让浏览器需要读取的字符更少,从而降低带宽消耗,并帮助页面更早进入可交互状态。
我的代码会被发送到服务器吗?
不会。所有压缩都在你的浏览器本地进行。你的代码绝不会被上传或存储到任何地方 —— 即使是专有源码也只留在你的设备上。
压缩会破坏我的代码吗?
它的设计宗旨就是保持功能不变。Terser 会安全地重命名 JavaScript 标识符,HTML 会保持 pre、script、style 和 textarea 的内容原样不动,CSS 也会保持 calc() 表达式完整。与任何构建步骤一样,请测试产物并保留你的原始源码。
“重命名变量”是什么意思?
重命名会缩短本地变量和函数的名称 —— 例如把 myVariable 变成 a —— 在不影响代码运行的前提下削减文件体积。它只重命名那些不对外暴露的标识符。
这里能把代码还原(反压缩)吗?
不能 —— 本工具只做压缩。要把压缩后的代码美化或重新格式化,请改用代码格式化或美化工具。请注意,被重命名的 JavaScript 名称无法还原成原名,因为这些信息在压缩过程中已被移除。
我能省下多少文件体积?
这取决于语言和编码风格。开启重命名变量和压缩优化的 JavaScript 通常能减小 40–70%,CSS 一般为 20–40%,HTML 则视空白和注释的多少为 10–30%。统计栏会显示你代码的精确节省量。
压缩(minify)和 gzip 有什么区别?
压缩会改写源码本身以去掉不必要的字符,因此无论在哪里读取,文件都更小。gzip 则是在传输时应用的服务器端压缩,由浏览器透明地解压。两者可以叠加:先压缩,再让服务器对结果做 gzip,得到最小的下载体积。
我能一次压缩多个文件吗?
本工具每次处理一个文件。压缩完成后,上传一个新文件或粘贴新的代码即可处理下一个。
还没有评论,快来发表第一条!