CSS ミニファイアと美容師

CSS Minifier & Beautifier は双方向のスタイルシート ツールです。ブラウザーが必要としないすべてのものを削除して CSS を圧縮します。コメント、空白、冗長なセミコロン、長尺の 16 進色、単位の値をゼロの単位で - プロセスを逆にして、単一行の本番バンドルを読み込み可能な適切なインデントされたルールに戻します。 レンダリング ブロック スタイルシートから取り除くバイトごとに、ブラウザがダウンロードしてすぐに解析できるバイトが、最初のコンテンツ フル ペイントや最大のコンテンツ ペイントなどのコア Web Vitals メトリックを直接フィードします。

ミニファイアは意図的に保守的です。 文字列リテラル、url() 値、および calc() 式を完全に認識しているため、calc(100% - 20px) が依存する空白を削除せず、コンテンツ文字列内の色のようなテキストを書き換えたり、div:hover と div:hover を区別する間隔に触れたりしないでください。 一般的な手書きのスタイルシートでは、Gzip の前に 25 ～ 40% のサイズの縮小が期待できます。GZIP または Brotli をワイヤーで組み合わせても、圧縮が反復的でコメントのない入力でよりよく機能するため、縮小によって意味のあるスライスが削られます。

すべてのブラウザでは、すべて 100% クライアント側で実行されます。 CSS がアップロード、ログ、またはサーバーに保存されることはありません。つまり、独自のデザイン システム コード、未発表の製品スタイル、またはクライアント ワークを安全に貼り付けることができます。 また、ページがロードされるとオフラインでも機能します。完全な PostCSS または ESBuild パイプラインを配線せずに、簡単な Minify パスが必要な場合に役立ちます。

ここでの縮小は、一連の検索ルールではなく、構文に注意することです。これが、CSS が一致するものを削除するため、文字列内の空白、url() 値、属性セレクターだけをそのままにして、本番スタイルシートで安全に実行できるようにします。 感嘆符で始まるコメントは、ビルドを存続させる必要があるライセンス ヘッダーの規則であるままにされます。