Cakupan CSS dan Gaya yang Tidak Digunakan

Berkas CSS berukuran besar sering berisi gaya untuk komponen yang tidak ada di halaman saat ini. Setiap bita yang tidak digunakan meningkatkan waktu penguraian, waktu pembangunan CSSOM, dan ukuran transfer. Aplikasi produksi umumnya dapat memiliki 90% atau lebih CSS yang tidak digunakan pada halaman tertentu.

Buka DevTools → panel Cakupan (Cmd+Shift+P → Cakupan). Mulai merekam, berinteraksilah dengan halaman, lalu hentikan perekaman. Panel tersebut menampilkan setiap berkas CSS beserta persentase yang digunakan dan menyoroti aturan yang tidak digunakan dengan warna merah. Ekspor data cakupan sebagai JSON untuk dianalisis.

PurgeCSS memindai berkas HTML, JS, dan templat Anda untuk mencari nama kelas, lalu menghapus aturan CSS yang tidak digunakan. Konfigurasikan glob konten agar mencakup semua berkas yang mungkin merujuk nama kelas. Masukkan kelas yang digunakan secara dinamis (ditambahkan oleh JS) ke safelist agar tidak terhapus secara tidak sengaja.

Kompilator JIT milik Tailwind hanya menghasilkan kelas utilitas yang benar-benar digunakan dalam templat Anda. CSS yang dihasilkan sangat kecil—sering kali 5–15KB untuk aplikasi lengkap—karena utilitas yang tidak digunakan tidak pernah dibuat. Inilah hasil penghapusan yang ideal.

Dalam konfigurasi webpack atau Vite, tambahkan PurgeCSS dengan glob konten yang mencakup semua berkas templat. Opsi safelist menerima string, regex, dan deep-safelist untuk pola kelas dinamis yang kompleks dari pustaka seperti Headless UI.

CSS Modules menghasilkan nama kelas unik untuk setiap berkas dan menyingkirkan modul yang tidak digunakan melalui konfigurasi pembundel. Hanya modul CSS yang diimpor yang disertakan dalam paket—penempatan komponen dan gayanya secara berdampingan secara alami menghilangkan gaya global yang tidak digunakan.

Bagi CSS berdasarkan rute dalam kerangka kerja seperti Next.js (ekstraksi CSS per halaman), atau gunakan impor dinamis dengan modul CSS. Setiap halaman hanya memuat gayanya sendiri, sehingga analisis cakupan per halaman menjadi lebih bermakna daripada analisis per aplikasi.

Audit Lighthouse “Kurangi CSS yang tidak digunakan” memperkirakan potensi penghematan bita dengan menghapus aturan yang tidak digunakan. Audit ini mengidentifikasi sumber daya lembar gaya tertentu dengan persentase penggunaan yang rendah. Gunakan hasilnya sebagai panduan untuk menentukan berkas mana yang harus diaudit terlebih dahulu.

Analisis cakupan hanya menangkap keadaan yang terlihat selama perekaman. Keadaan saat kursor diarahkan, keadaan modal terbuka, keadaan galat, dan keadaan saat pengguna terautentikasi harus dipicu secara manual selama perekaman cakupan agar gayanya tidak keliru dihapus.

Lembar gaya global monolitik mengumpulkan CSS yang tidak digunakan seiring waktu ketika fitur dihapus. CSS per komponen (CSS Modules, Styled Components, utilitas Tailwind) lebih mudah dirapikan karena gaya berada bersama komponennya dan dihapus secara bersamaan.

Untuk berkas CSS lama berukuran besar, gunakan UnCSS atau PurgeCSS dalam mode hanya-laporan terlebih dahulu. Urutkan aturan berdasarkan frekuensi penggunaan. Ekstrak dan hapus gaya pengaya vendor yang jelas tidak digunakan. Lakukan secara bertahap agar gaya untuk keadaan khusus tidak terhapus secara tidak sengaja.

Apa yang diukur oleh panel Cakupan Chrome DevTools?

Analisis cakupan CSS dengan Cakupan DevTools dan Lighthouse mengidentifikasi aturan yang tidak digunakan. PurgeCSS dan Tailwind JIT mengotomatiskan penghapusan kode mati. CSS Modules dan pemisahan berdasarkan rute mencegah penumpukan gaya yang tidak digunakan. Secara bersama-sama, semua ini meminimalkan muatan CSS dan waktu penguraian.