Minifier CSS
Perkecil file CSS dan lihat persis berapa banyak yang kamu hemat.
Jalan di browser kamu. Apa pun yang kamu ketik tidak dikirim ke mana pun.
- Menampilkan byte yang dihemat
- Menghapus komentar
- Tidak ada yang diupload
Cara minify CSS
- Tempel CSS kamu.
- Cek penghematan ukuran di baris statistik.
- Salin atau unduh CSS yang sudah di-minify.
Apa yang dihapus
- Komentar yang ditulis sebagai /* ... */
- Whitespace dan baris baru di antara rule dan deklarasi
- Titik koma di akhir tepat sebelum kurung kurawal penutup
- Rule duplikat atau berlebihan, kalau csso bisa menggabungkannya dengan aman
- Titik koma berlebih dan blok rule yang kosong tanpa deklarasi di dalamnya
Penghematan ukuran yang umum
| Titik awal | Kira-kira berapa banyak lebih kecil |
|---|---|
| CSS tulisan tangan dengan komentar | 20 sampai 30 persen |
| CSS yang sudah ringkas | 5 sampai 10 persen |
| CSS hasil preprocessor | 10 sampai 20 persen |
Kapan minify, dan kapan tidak
- Minify tepat sebelum deploy, bukan saat sedang aktif mengedit, karena stylesheet yang mudah dibaca jauh lebih cepat di-debug.
- Lewati minify untuk file yang sudah disajikan ter-gzip dan kecil, di mana selisih ukurannya tidak sepadan dengan langkah build ekstra.
Kapan minify memberi perbedaan paling besar
- Stylesheet yang dipakai bersama di banyak halaman, karena byte yang dihemat berkali lipat di tiap page load.
- Design system atau component library besar dengan banyak rule berulang yang bisa digabung.
- Situs tanpa build pipeline, di mana CSS tulisan tangan disajikan langsung tanpa langkah minifikasi lain.
- Framework CSS yang dipangkas hanya jadi utility class yang benar-benar dipakai di halaman.
FAQ Minifier CSS
Berapa banyak CSS-ku akan mengecil?
Biasanya 10 sampai 30 persen, lebih banyak kalau aslinya punya banyak komentar dan whitespace, lebih sedikit kalau sudah ringkas.
Apakah minify mengubah tampilan halamanku?
Tidak. Minify hanya menghapus whitespace, komentar, dan sintaks yang berlebihan. Aturan yang berlaku untuk halamanmu tetap sama.
Apakah ini menggabungkan rule yang duplikat?
Ya, kalau aman dilakukan, yang bisa memperkecil file lebih jauh daripada sekadar menghapus whitespace.
Sebaiknya aku simpan file aslinya?
Ya. Simpan versi yang mudah dibaca untuk editing dan pakai versi yang sudah di-minify hanya di production.
Minifier apa yang dipakai di sini?
csso, minifier CSS yang sama yang dipakai beberapa plugin bundler. Ini juga menggabungkan sebagian rule duplikat dan berlebihan, tidak cuma menghapus whitespace.
Apakah CSS yang sudah di-minify masih aman ditempel ke stylesheet?
Aman, ini tetap CSS standar dengan whitespace-nya dihapus. Browser atau build tool mana pun membacanya persis sama seperti aslinya.
Apakah ini menghapus vendor prefix yang masih aku butuhkan, seperti -webkit-?
Tidak. Properti dan nilai berawalan vendor tetap persis seperti tertulis. Minify hanya menghapus whitespace, komentar, dan rule yang aman digabung, tidak pernah properti yang memang dideklarasikan CSS-mu.
Apa yang terjadi dengan custom property (variable) CSS?
Tetap dipertahankan apa adanya, termasuk nama -- dan nilainya, karena minify tidak mengganti nama atau me-resolve custom property.