免费工具 JS 压缩、CSS 压缩与 HTML 压缩
把脚本、样式表或整页 HTML 贴进来：去掉浏览器用不到的注释和空白，JS 还会缩短局部变量名；同时给出压缩前后的字节数，并用 gzip 实测——服务器开了 gzip 时，访客真正下载的是这个体积。
- JS / CSS / HTML
- gzip 体积实测
- 本地处理
压缩代码，对比体积
示例是价格页上的一段埋点脚本。用下面的按钮切换 CSS、HTML 示例，或贴入自己的代码，结果随输入更新。
粘贴代码或打开本地文件，文件不会上传。
压缩前（字节）
1,406
粘贴内容按 UTF-8 计算的大小。
压缩后（字节）
641
结果按 UTF-8 计算的大小。
压缩前 · gzip
830
用浏览器自带的 gzip（级别 6）实测。
压缩后 · gzip
401
服务器开启 gzip 时大致的传输体积。
检查结果
/*! pricing-events.js v1.3 | MIT License */
(function(){"use strict";var t="[data-plan]";var e="monthly";function n(t){var e=t.querySelector(".price");var n=e?Number(e.textContent.replace(/[^0-9.]/g,"")):0;return n||0}function a(t,e){if(window.tapcub&&typeof window.tapcub.track==="function"){window.tapcub.track(t,e)}}document.addEventListener("change",function(t){if(t.target.name==="billing"){e=t.target.value;a("billing_toggle",{period:e})}});document.addEventListener("click",function(r){var i=r.target.closest(t);if(!i||!r.target.closest("button"))return;a("plan_selected",{plan:i.getAttribute("data-plan"),period:e,price:n(i)})})})();版本 v1.0更新于 更新记录
四个数字，回答两个问题
原始体积说明压缩去掉了多少；gzip 体积说明访客实际少下载多少——服务器和 CDN 一般会先把文本压缩再发出去。
压缩前 / 压缩后
按 UTF-8 计算的字节数。示例脚本里注释、缩进和较长的局部变量名占了 54.4%，所以原始体积降得很多。中文注释更占地方：一个汉字通常是 3 个字节，同一段脚本中文注释版比英文注释版的 gzip 体积还大。
两个 gzip 体积
gzip 会把重复出现的内容换成短引用，空白和重复的长变量名本来就很便宜。想知道压缩在网络上值多少，比较两个 gzip 数字，而不是原始数字。很多 CDN 用 Brotli，结果通常还会再小一点。
为什么 gzip 后省得少
代码压缩和 gzip 去掉的冗余有一部分重叠。CSS 示例的原始体积减少 24.9%，gzip 后只减少 21.3%。两样都要做：效果叠加，但不是简单相加。
检查结果
JS 有语法错误时不会压缩，并标出行和列；CSS、HTML 仍会给出结果，同时列出没闭合的注释、括号或标签，方便回到源文件修改。
体积在本页实测：原始体积按 UTF-8，gzip 用浏览器自带的 CompressionStream（默认级别 6）。Nginx 默认 gzip_comp_level 是 1，服务器用 Brotli 或别的级别时，实际传输的字节数会有些差别。
三步完成
不用安装，代码不上传。
-
1
选语言
选 JavaScript、CSS 或 HTML，贴入代码或打开本地文件。三个示例按钮分别加载脚本、样式表和整页 HTML。
-
2
选项
JS 建议保持「缩短局部变量名」；只有确定没有别处按名字调用时才开「顶层变量名也缩短」。代码里有第三方库时保留版权注释。
-
3
复制或下载
复制结果，或下载成
.min.js、.min.css、.min.html。原文件要留着：压缩后的文件用来上线，不用来改。
各语言去掉什么、保留什么
三种压缩都很保守：只做不会改变代码运行结果、不会改变页面显示的修改，选项里写明的情况除外。
- JS 用 terser 5.51.2 的解析器、变量改名和输出部分处理，结果一定是合法的 JavaScript
- 没有 terser 的 compress 步骤：死代码、常量折叠、
console调用都原样保留；这些交给构建工具（terser、esbuild）在打包时做 - CSS、HTML 按规则处理，不合并规则、不改颜色写法、不删可省略的结束标签
| 语言 | 去掉或缩短 | 原样保留 |
|---|---|---|
| JavaScript | 空白、换行、注释；局部变量名和参数名；统一引号 | 全局变量名、对象属性名、字符串内容、版权注释（可选） |
| CSS | 空白、注释、块里最后一个 ;、0.5 里的 0 | 选择器里的空格（div :hover 和 div:hover 不同）、calc() 里的空格、字符串、url() |
| HTML | 注释、块级元素之间的空白、文字里连续的空格、type="text/javascript"、checked="checked" 写成 checked | <pre>、<textarea> 里的全部内容、行内元素之间的一个空格、IE 条件注释、属性引号 |
| HTML 内联部分 | <style> 和 style="" 按 CSS 压缩；<script> 按 JS 压缩（不改变量名）；JSON-LD 压成一行 | 带 src 的脚本、模板、不认识 type 的脚本 |
三个示例压缩前后的体积
三个示例按钮加载的就是这几段代码，下表数字和工具里用的是同一套函数。
| 示例 | 压缩前 | 压缩后 | 减少 | 压缩前 gzip | 压缩后 gzip | gzip 后减少 |
|---|---|---|---|---|---|---|
| JS，缩短局部变量名 | 1,406 | 641 | 54.4% | 830 | 401 | 51.7% |
| JS，只去空白和注释 | 1,406 | 866 | — | 830 | 467 | — |
| CSS | 871 | 654 | 24.9% | 520 | 409 | 21.3% |
| HTML（含内联 CSS、JS、JSON-LD） | 1,671 | 1,172 | 29.9% | 1,019 | 805 | 21.0% |
对比前两行就能看出「缩短变量名」的作用，这也是 JS 压缩和单纯去空格的区别。示例文件很小，gzip 固定开销（约 20 字节）占比大；几十 KB 的真实文件结果会更稳定。
压缩后出问题，多半是这几种
压缩本身是安全的，前提是时机和选项对。
直接改压缩后的文件
可读的源文件放进版本库，上线前再压缩，建议在构建步骤里做并生成 source map。手改 .min.js 会和源文件越差越远，也没法审查。
缩短了别人要调用的名字
「顶层变量名也缩短」会让 HTML 里 onclick、其它脚本、标签管理器按名字调用的函数失效。文件不是完全独立的就别开。
元素之间的空隙没了
块级元素之间的空白会被去掉。如果 CSS 把列表项、卡片设成了 inline-block，浏览器原来画出的那点空隙也会消失；间距请用 gap 或 margin，不要依赖源码里的空格。
以为压缩就能让页面变快
文件小了下载更快，但脚本照样要执行。阻塞渲染的脚本、大图、长任务的影响通常比几 KB 空白大得多。第三方脚本用 defer 或 async 加载；Nginx 记得把 text/css、application/javascript 加进 gzip_types（默认只压缩 text/html）。
体积到底有没有拖慢页面，用真实访客的数据看
压缩对速度的影响，没量过之前都只是猜测。TapCub 用同一段统计代码收集页面速度和脚本错误，改动前后哪些页面慢，一看就知道。
js压缩是什么？在线压缩js安全吗？
JS 压缩是在不改变代码功能的前提下，去掉空白、换行和注释，并把局部变量名、参数名改短。本工具用 terser 的解析器和变量改名：代码解析不了时会标出行和列，而不是硬压出一个坏文件。全部在浏览器本地完成，代码不上传。
html压缩、css压缩能让文件小多少？
取决于源码里有多少缩进和注释，没有一个通用的百分比。上面的示例：CSS 减少 24.9%，HTML 减少 29.9%，JS 减少 54.4%。gzip 之后省得会少一些，访客实际下载多少看 gzip 那两列。
代码压缩和 gzip、Brotli 压缩是一回事吗？
不是。代码压缩是把文件改写得更短，结果仍是能运行的代码；gzip / Brotli 是传输时对字节编码，浏览器收到后再解码还原。两者可以叠加：压缩过的文件 gzip 后也更小，只是没有原始数字看起来那么多。
压缩会不会把代码弄坏？
去空白和缩短局部变量名不会改变行为。有风险的是「顶层变量名也缩短」，会让别处按名字调用的函数失效；HTML 里 inline-block 元素之间的空隙会消失。上线前用压缩后的文件测一遍。
为什么没有去掉 console.log、删除无用代码的选项？
这属于 compress 步骤，要做整段程序分析，会让工具加载体积大好几倍。建议在构建里做：terser、esbuild 都能去掉 console 调用和执行不到的代码。
压缩对 Core Web Vitals 有帮助吗？
有间接帮助：关键路径上的 CSS、脚本变小，LCP 可能提前；要解析的 JS 少了，对 INP 也有好处。但阻塞渲染的资源和长任务通常影响更大。改动前后用真实访客的 LCP、INP 对比，才知道有没有用。
宝塔 / Nginx 开了 gzip，还需要压缩代码吗？
需要，两者是叠加关系。另外检查两点：gzip_types 默认只有 text/html，CSS 和 JS 要手动加上；gzip_comp_level 默认是 1，调到 5–6 体积会更小，CPU 开销也会增加。
JSON 压缩（压成一行）用哪个工具？
本工具不单独处理 JSON。把 JSON 贴到 JSON 格式化工具，排版方式选「压缩成一行」：会先校验，出错标出第几行第几列。HTML 里的 JSON-LD 结构化数据，在这里压缩 HTML 时会一起压成一行。