RevealTheme logo

CSS壓縮工具

移除CSS中的註解、空白和不必要的字元,以減小檔案體積。

如何使用本工具

  1. 1

    Paste your CSS — a single rule, a component stylesheet, or an entire file.

  2. 2

    The minified result and the byte savings appear instantly below the input.

  3. 3

    Copy the minified output, or compare the before/after byte count to see the reduction.

什麼是CSS壓縮工具?

壓縮後的CSS載入更快:在關鍵渲染路徑上,每一個位元組都很重要。壓縮會移除註解、摺疊空白並簡化語法(例如,'color: #ffffff'變為'color:#fff')。對於生產環境網站,請使用cssnano這類建置時壓縮工具;本工具適用於臨時的CSS片段。

常見使用場景

  • Shrink a critical-CSS snippet you're inlining into the <head> to remove a render-blocking request.

  • Compress CSS for an HTML email or newsletter, where every kilobyte counts and there's no build pipeline.

  • Paste CSS into a CMS or page-builder field that doesn't minify automatically (WordPress 'Additional CSS', Shopify theme settings).

  • Check how much weight a third-party stylesheet adds before deciding whether to self-host it.

  • Clean up CSS copied from DevTools, which arrives with computed-style comments and inconsistent spacing.

  • Produce a one-line version of a rule to paste into a chat, ticket, or code-review comment.

常見問題

壓縮會破壞我的CSS嗎?
不會:壓縮保留語意。如果你的CSS出錯了,那是因為原始程式碼本就有語法錯誤,只是瀏覽器能容忍而壓縮工具不能。
我能期待多大的體積縮減?
對於典型的手寫CSS,約為20%到40%。對於框架中已壓縮的CSS,縮減幅度會更小。

相關工具