JavaScript 与 CSS 压缩

功能简介

压缩（minify）会删掉浏览器运行代码时用不到的一切：空白、换行、注释和长名字。文件越小下载越快，能改善页面加载速度和 Core Web Vitals 指标，在移动网络下尤其明显。

这个工具用 Terser 压缩 JavaScript，它也是 webpack、Rollup 和 Vite 使用的压缩器；用 CSSO 压缩 CSS，CSSO 还会重组样式表：缩短颜色（#ffffff 变成 #fff），去掉多余的单位和值（0px 0px 变成 0），合并选择器或声明相同的规则。

使用方法

1. 把代码粘贴到「输入」框，或把 .js、.css 文件拖进去，也可以点「示例」。
2. 选择 JavaScript 或 CSS。
3. JavaScript 的「缩短变量名」会把局部变量和参数改成单个字母，导出的名称和全局名称不会改。
4. CSS 的「合并重复规则」会把声明相同的规则合在一起。
5. 复制或下载结果。输入框和输出框下方的大小统计能看出省了多少。

如果 JavaScript 有语法错误，错误提示会给出行号和列号，点击即可跳过去。

示例

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

会变成

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

什么时候用

适合临时的一次性需求：放到 CDN 的小段代码、HTML 邮件里的内联脚本、书签脚本，或者看看一个库最多能压到多小。正式项目应该在每次构建时由打包工具自动压缩，源码保持可读。