Minify CSS

Ke mana sebenarnya byte-byte itu pergi

Sebagian besar penghematan berasal dari spasi dan komentar, yang dalam stylesheet tulisan tangan jumlahnya sangat banyak — indentasi, baris kosong di antara aturan, dan judul bagian yang membuat file besar mudah dinavigasi semuanya murni beban begitu file dikirim. Selain itu, nilai dipersingkat dengan cara yang tidak mungkin mengubah maknanya: warna yang ditulis #ffffff menjadi #fff, 0px menjadi 0 karena nol tidak memerlukan satuan, angka nol di depan pada 0.5em dibuang, dan margin: 10px 10px 10px 10px diringkas menjadi margin: 10px.

Yang sengaja tidak dilakukan adalah kategori yang berisiko. Menggabungkan aturan dengan deklarasi yang identik, atau mengubah urutannya, mengubah cascade — dan cascade adalah bagian CSS tempat dua aturan dengan spesifisitas setara diputuskan berdasarkan mana yang muncul terakhir. Minifier yang agresif mengubah urutan akan menghasilkan file yang lebih kecil dan, pada stylesheet besar, halaman yang sedikit berbeda tanpa terasa. Deklarasi duplikat juga sering kali disengaja, dibiarkan sebagai fallback untuk browser lama yang mengabaikan deklarasi kedua.

Aturan bersarang dan sintaks media range modern ditolak, bukan di-minify, dan alasannya perlu dijelaskan karena ini kebalikan dari yang dilakukan kebanyakan alat. Parser di baliknya lebih tua daripada kedua fitur itu, dan saat menemukan sesuatu yang tidak dipahaminya, parser itu tidak menampilkan error — ia diam-diam menghapusnya, sehingga blok bersarang begitu saja hilang dari hasil dan halaman kehilangan style tanpa ada yang melaporkannya. Menolak file adalah jawaban yang jujur. Jika stylesheet Anda memakai nesting bawaan atau @media (400px <= width <= 700px), gunakan salah satu alat di bawah.

Seperti halnya markup, nilailah hasilnya setelah kompresi. Stylesheet dikirim dalam bentuk gzip atau brotli, dan algoritma itu sudah sangat pandai menangani spasi yang berulang — jadi file yang menyusut 30 persen setelah di-minify mungkin hanya mengecil 5 persen saat dikirim. Penghematannya nyata, tetapi lebih kecil daripada angka utamanya.

Jika Anda butuh hal lain

Lightning CSS adalah alat yang tepat untuk stylesheet modern: ia memahami nesting, media range, fungsi warna, dan semua yang ditambahkan dalam beberapa tahun terakhir, me-minify lebih ketat daripada alat yang lebih lama, dan sekaligus bisa mentranspilasi sintaks baru untuk browser lama. esbuild --minify style.css hampir sama bagusnya dan sangat cepat. Keduanya seharusnya ada di langkah build, bukan di tab browser.

Keuntungan yang jauh lebih besar biasanya adalah menghapus aturan yang tidak Anda pakai. Situs yang dibangun di atas utility framework atau component library umumnya mengirim stylesheet yang sebagian besar isinya tidak pernah cocok dengan apa pun di halaman — dan PurgeCSS, atau build bawaan framework itu, akan memangkasnya hingga sepersepuluhnya. Me-minify CSS yang tidak terpakai hanya membuat CSS yang tidak terpakai lebih kecil; menghapusnya adalah solusi yang sebenarnya.