在线 CSS 压缩工具：减少 CSS 文件体积优化加载性能

code2026-07-252 分钟阅读

什么是 CSS 压缩

CSS 压缩（CSS Minification）是移除 CSS 文件中不必要的字符以减小文件体积的过程。包括移除空白、注释、缩短颜色值和属性名等。

压缩前后对比

压缩前：

/* 主样式 */
body {
    font-family: "Microsoft YaHei", sans-serif;
    background-color: #ffffff;
    color: #333333;
}

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

压缩后：

body{font-family:"Microsoft YaHei",sans-serif;background-color:#fff;color:#333}.container{max-width:1200px;margin:0 auto;padding:20px}

为什么需要 CSS 压缩

减少文件大小：CSS 压缩率通常 20-40%
加快加载速度：更小的文件意味着更快的网络传输
节省带宽：减少服务器流量消耗
改善首次渲染：CSS 是渲染阻塞资源，压缩加速首屏显示
提升 Lighthouse 评分：减少页面资源体积
移动端优化：降低移动网络下的加载延迟

CSS 压缩策略

| 策略 | 说明 | 示例 | |------|------|------| | 移除空白 | 压缩空格、换行、缩进 | { } → {} | | 移除注释 | 删除 /* */ 注释 | — | | 缩短颜色值 | #ffffff → #fff | 颜色值简写 | | 移除单位零值 | 0px → 0 | 零值省略单位 | | 合并相同规则 | 相同样式合并 | 减少重复 | | 缩短属性名 | 使用标准简写属性 | margin 代替四方向 | | 移除分号最后一个 | 块内最后一个分号可省略 | 轻微减小 |

如何使用在线工具

使用 DevToolkit Pro 的 CSS 压缩工具：

粘贴 CSS 代码
选择压缩选项
实时显示压缩后的代码
显示压缩率和节省的字节数

构建工具中的 CSS 压缩

Webpack（css-minimizer-webpack-plugin）

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      '...',
      new CssMinimizerPlugin()
    ]
  }
};

Vite

import { defineConfig } from 'vite';
import css from '@adobe/css-sort';

export default defineConfig({
  css: {
    postcss: {
      plugins: [css()]
    }
  },
  build: {
    cssMinify: true // Vite 默认在生产构建中压缩 CSS
  }
});