Pliki CSS mogą zawierać niepotrzebne znaki, takie jak komentarze, odstępy czy wcięcia. W środowisku produkcyjnym znaki te można bezpiecznie usunąć, aby zmniejszyć rozmiar pliku bez wpływu na sposób przetwarzania stylów przez przeglądarkę. Ta technika jest nazywana minifikacją.
Wczytuję jednolity kod CSS
Przyjrzyjmy się temu blokowi CSS:
body {
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
margin: 2em;
}
/* all titles need to have the same font, color and background */
h1 {
font-style: italic;
color: #373fff;
background-color: #000000;
}
h2 {
font-style: italic;
color: #373fff;
background-color: #000000;
}
Treść taka jest czytelna i wiąże się z kosztem utworzenia większego, niż jest to konieczne:
- Wykorzystuje spacje do tworzenia wcięć i zawiera komentarze, które są ignorowane przez przeglądarkę, więc może je usunąć.
- Elementy
<h1>i<h2>mają te same style: zamiast zadeklarować je oddzielnie, można użyć wartości „h1 {...} h2 {...}” jako „h1, h2{...}”. - Argument background-color,
#000000, można wyrazić tylko jako#000.
Po wprowadzeniu tych zmian uzyskasz bardziej kompaktową wersję tych samych stylów:
body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}
Ten styl CSS prawdopodobnie nie przypadł Ci do gustu. Możesz zamiast tego pisać kod CSS w zwykły sposób i dodać do procesu kompilacji krok minifikacji. Z tego przewodnika dowiesz się, jak to zrobić przy użyciu popularnego narzędzia do tworzenia: webpack.
Zmierz odległość
Przeprowadzisz minifikację CSS do witryny, która była używana w innych przewodnikach: Fav Kitties. Ta wersja witryny używa ciekawej biblioteki CSS: animate.css do animowania różnych elementów strony, gdy użytkownik głosuje na kota 😺.
Na początek zastanów się, jakie będą możliwości po zmniejszeniu tego pliku:
- Otwórz stronę pomiaru.
- Wpisz adres URL
https://fav-kitties-animated.glitch.mei kliknij Uruchom kontrolę. - Kliknij Wyświetl raport.
- Kliknij Skuteczność i przejdź do sekcji Możliwości.
Otrzymany raport pokazuje, że z pliku animate.css można zapisać maksymalnie 16 KB:
Teraz sprawdź zawartość pliku CSS:
- Otwórz stronę Ulubione kotki w Chrome. (Pierwsza odpowiedź serwerów Glitch może trochę potrwać).
- Naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Sieć.
- Kliknij filtr CSS.
- Zaznacz pole wyboru Disable cache (Wyłącz pamięć podręczną).
- Załaduj ponownie aplikację.
Strona żąda 2 plików CSS – odpowiednio 1,9 KB i 76,2 KB.
- Kliknij animate.css.
- Kliknij kartę Odpowiedź, aby wyświetlić zawartość pliku.
Zwróć uwagę, że arkusz stylów zawiera znaki odstępów i wcięć:
Następnie dodaj do procesu kompilacji kilka wtyczek Webpack, aby zmniejszyć te pliki.
Minifikacja CSS za pomocą pakietu internetowego
Zanim przejdziemy do optymalizacji, poświęć trochę czasu na zapoznanie się z procesem tworzenia strony Fav Kitties:
Domyślnie wynikowy pakiet JS tworzony przez pakiet internetowy zawiera domyślnie w treści zawartość plików CSS. Chcemy przechowywać osobne pliki CSS, więc korzystamy z dwóch uzupełniających się wtyczek:
- Jako jeden z kroków procesu kompilacji mini-css-extract-plugin wyodrębni każdy arkusz stylów do osobnego pliku.
- Parametr webpack-fix-style-only-entries służy do rozwiązywania problemów z wepback 4, aby uniknąć generowania dodatkowego pliku JS dla każdego pliku CSS wymienionego w pliku webpack-config.js.
Teraz wprowadzisz kilka zmian w projekcie:
- Otwórz projekt Fav Kitties w Glitch.
- Aby wyświetlić źródło, naciśnij Wyświetl źródło.
- Kliknij Remiksuj, aby edytować, aby umożliwić edytowanie projektu.
- Kliknij Terminal (uwaga: jeśli nie widać przycisku terminala, może być konieczne użycie opcji pełnego ekranu).
Aby zmniejszyć wynikowy kod CSS, użyj optymalizacji optimize-css-assets-webpack-plugin:
- W konsoli Glitch uruchom polecenie
npm install --save-dev optimize-css-assets-webpack-plugin. - Uruchom
refresh, aby zmiany zostały zsynchronizowane z edytorem Glitch.
Następnie wróć do edytora Glitch, otwórz plik webpack.config.js i wprowadź te zmiany:
Wczytaj moduł na początku pliku:
js
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
Następnie przekaż instancję wtyczki do tablicy Plugins:
js
plugins: [
new HtmlWebpackPlugin({template: "./src/index.html"}),
new MiniCssExtractPlugin({filename: "[name].css"}),
new FixStyleOnlyEntriesPlugin(),
new OptimizeCSSAssetsPlugin({})
]
Po wprowadzeniu zmian uruchomi się ponowne skompilowanie projektu.
Tak będzie wyglądać plik webpack.config.js:
Następnie sprawdź wynik optymalizacji za pomocą narzędzi do pomiaru skuteczności.
Zweryfikuj
- Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran
.
Jeśli pominiesz w którymkolwiek poprzednim kroku, kliknij tutaj, aby otworzyć zoptymalizowaną wersję witryny.
Aby sprawdzić rozmiar i zawartość plików:
- Naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Sieć.
- Kliknij filtr CSS.
- Zaznacz pole wyboru Wyłącz pamięć podręczną, jeśli nie jest zaznaczone.
- Załaduj ponownie aplikację.
Możesz sprawdzić te pliki i upewnić się, że nowe wersje nie zawierają żadnych spacji. Oba pliki są znacznie mniejsze, zwłaszcza plik animate.css został zmniejszony do ~26%, co pozwala zaoszczędzić ok. 20 KB.
Na koniec:
- Otwórz stronę pomiaru.
- Wpisz adres URL zoptymalizowanej witryny.
- Kliknij Wyświetl raport.
- Kliknij Skuteczność i znajdź sekcję Możliwości.
Raport nie wyświetla już wartości „Minify CSS” (Minifikuj CSS) jako „Opportunity” (Możliwość). Ten raport został przeniesiony do sekcji „Zaliczone audyty”:
Pliki CSS są zasobami blokującymi renderowanie, więc jeśli zastosujesz minifikację w witrynach, które używają dużych plików CSS, możesz zaobserwować poprawę danych takich jak Pierwsze wyrenderowanie treści.
Zasoby i dalsze kroki
W tym przewodniku omówiliśmy minifikację CSS za pomocą pakietu internetowego, ale to samo można zastosować w przypadku innych narzędzi do tworzenia, takich jak gulp-clean-css dla Gulp lub grunt-contrib-cssmin dla Grunt.
Zmniejszenie można też zastosować do innych typów plików. Zapoznaj się z przewodnikiem minifikacji i kompresowania ładunków sieciowych, aby dowiedzieć się więcej o narzędziach do minifikacji kodu JavaScript i o technikach uzupełniających, takich jak kompresja.