Minifikuj CSS _

Jak działa minifikacja CSS?

Minifikator przetwarza arkusz stylów tokenizerem uwzględniającym kontekst, który odróżnia regiony chronione (literały łańcuchowe i wartości url()) od edytowalnych białych znaków, gdzie zwijanie i usuwanie jest bezpieczne.

1. Ochrona łańcuchów i URL-i. Przed jakimkolwiek przekształceniem tokenizer identyfikuje każdy łańcuch w cudzysłowie ("…" lub '…') i każdy argument url(…), zachowując je dosłownie. Kolejne przebieg nigdy nie dotykają tych bajtów, więc URL obrazu tła ze spacjami lub właściwość content ze znakami interpunkcji są zachowywane dokładnie.
2. Usuwanie komentarzy. Bloki /* … */ są usuwane, gdy przełącznik jest włączony. Jeśli przełącznik komentarzy licencji jest również włączony, bloki /*! … */ przeżywają, by nagłówki licencji MIT, Apache i BSD pozostały w wynikach zgodnie z wymogami tych licencji.
3. Zwijanie białych znaków. Każdy ciąg spacji, tabulatorów i znaków nowej linii zwija się do jednej spacji, a następnie białe znaki wokół znaków strukturalnych CSS {, }, ;, : i , są usuwane całkowicie. Listy selektorów i wartości reflow-ują się tak samo, jak czyta je parser przeglądarki.
4. Optymalizacja wartości. Opcjonalne przebiegi zamieniają kody kolorów hex na małe litery, zwijają parowane 6-cyfrowe kanały hex do 3-cyfrowego skrótu (#aabbcc → #abc) i usuwają jednostki wymiaru z wartości zerowych (0px → 0). Przebieg zerowych jednostek pomija wartości wewnątrz wywołań transform(), gdzie jednostki mają znaczenie.
5. Raportowanie zaoszczędzonych bajtów. Zarówno oryginalny, jak i zminifikowany tekst są mierzone przez new TextEncoder().encode(…).byteLength — ten sam licznik bajtów UTF-8, który widzi CDN lub serwer HTTP na łączu. Panel metryk pokazuje oryginalny rozmiar, rozmiar zminifikowany, zaoszczędzone bajty i procent oszczędności.

Dlaczego minifikować CSS?

• Szybsze ładowanie blokujące renderowanie. Przeglądarki nie wyrenderują ani jednego piksela, dopóki nie skończą parsować CSS. Redukcja arkusza stylów o 30 procent skraca ten blok, poprawia First Contentful Paint i widać to bezpośrednio w wyniku Lighthouse.
• Niższe rachunki za egress CDN. CloudFront, Cloudflare i Fastly naliczają opłaty za gigabajt egress. Odcięcie 20 procent z arkusza stylów wysyłanego przy każdej odsłonie staje się realną pozycją na fakturze, gdy miesięczny ruch przekroczy kilka milionów odsłon.
• Mniejsze osadzenia i CSS e-mailowy. Szablony e-mailów transakcyjnych inlinują CSS, by przeżyć specyfikę renderowania Outlooka i Gmaila, a każdy dodatkowy bajt zbliża do limitu przycięcia Gmaila wynoszącego 102 KB. Minifikacja przed inlinowaniem utrzymuje wiadomość poniżej limitu.
• Bez zależności od narzędzi budowania. Jednorazowe zadania, starsze repozytoria bez pipeline budowania i środowiska air-gapped nie zawsze mają miejsce na łańcuch narzędzi Node. Możesz uruchomić ten przebieg tutaj bez instalowania PostCSS, cssnano ani czegokolwiek innego.

Typowe zastosowania

Minifikacja CSS pojawia się na końcu niemal każdego pipeline budowania front-end i w kilku kontekstach runtime, gdzie liczba bajtów ma znaczenie.

• Produkcyjne pipeline budowania: Webpack, Vite, Rollup i Parcel mają krok minifikacji CSS w domyślnych ustawieniach trybu produkcyjnego. Uruchomienie tego przebiegu tutaj przed commitem pozwala zwalidować wynik bez uruchamiania pełnego builda.
• Osadzanie CSS w tagach <style>: frameworki renderowane po stronie serwera, które inlinują krytyczny CSS do dokumentu HTML, korzystają z tych samych oszczędności bajtów co samodzielne arkusze stylów, a mniejszy inline CSS skraca czas do First Byte.
• E-maile transakcyjne i marketingowe: HTML e-mailowy inlinuje cały CSS, więc każdy kilobajt w arkuszu stylów dodaje się do całkowitego rozmiaru wiadomości. Minifikacja przed inlinowaniem utrzymuje wiadomości wyraźnie poniżej limitów rozmiarów ESP.

Przykład krok po kroku

Wklej zestaw reguł o rozmiarze 1 KB z wcięciem dwuspacjowym, pustymi wierszami między selektorami, blokiem komentarza licencji na górze i rozbudowanymi kolorami hex jak #FFFFFF oraz marginesami z zerami jak margin: 0px. Przy wszystkich włączonych opcjach wynik zwija się do około 600 bajtów — oszczędność 40 procent — a renderowana strona wygląda bajtowo identycznie jak źródło.

Czy minifikacja zmienia zachowanie CSS?

Nie, przy domyślnych przełącznikach. Minifikator usuwa wyłącznie bajty, które parser CSS już odrzuca — białe znaki, komentarze, opcjonalny końcowy średnik — i pomija wnętrze transform(), gdzie jednostki mają znaczenie. Każdy selektor, właściwość i wartość są zachowywane.

Czy działa z SCSS lub LESS?

Tylko po skompilowaniu do czystego CSS. Składnia SCSS i LESS (zmienne, zagnieżdżanie, mixiny, selektory nadrzędne &) to nie jest poprawny CSS i minifikator ją zniszczy. Najpierw skompiluj źródło preprocesora, a następnie wklej tutaj skompilowany wynik.

Dlaczego moje komentarze licencji są usuwane?

"Usuń komentarze" jest domyślnie włączone i usuwa każdy blok /* … */. Włącz "Zachowaj komentarze licencji /*!", by zachować bloki zaczynające się od /*!. MIT, Apache i BSD wymagają, by nagłówek praw autorskich był dostarczany razem ze redystrybuowanym CSS.

Ile mogę zaoszczędzić?

Ręcznie pisany CSS zazwyczaj zmniejsza się o 15 do 35 procent. Pliki z dużą ilością komentarzy lub głębokimi wcięciami z wieloma literałami kolorów mogą osiągnąć 40 procent. Skompilowane wyniki z Sass lub CSS-in-JS są często częściowo już zminifikowane i oszczędzają mniej — zazwyczaj od 5 do 15 procent.

Uruchom minifikację CSS w zakładce przeglądarki i całkowicie pominiesz łańcuch narzędzi Node. Wklej arkusz stylów powyżej, przełącz opcje zgodnie z żądaną agresywnością przebiegu, a następnie skopiuj wynik lub pobierz go jako .min.css. Bez wysyłania, bez konta, bez biblioteki dostawcy.