Tentang alat ini
Pemindahan CSS mengalih keluar ruang putih, ulasan dan aksara yang tidak diperlukan daripada helaian gaya untuk mengurangkan saiznya sebelum disiarkan kepada penyemak imbas. Peraturan sebenar tidak berubah: helaian gaya yang dikecilkan memaparkan halaman secara identik dengan sumber yang tidak dikecilkan. Penjimatan diperoleh daripada mengalih keluar baris baharu, koma bertitik berlebihan, ulasan, peluang pintasan warna hex dan pintasan unit sifar (menggantikan 0px dengan 0).
Pada tapak web moden dengan berdozen peraturan gaya, pengurangan biasa ialah 20–40% berbanding sumber yang tidak dikurangkan. Digabungkan dengan pemampatan gzip di pelayan, penjimatan marginal mengecut — gzip sudah memampatkan teks berulang dengan berkesan — tetapi gabungan itu masih mengalahkan pemampatan sahaja, terutamanya apabila helaian gaya dicache dan disampaikan berkali-kali kepada ramai pelawat.
Pemkecil ini memproses CSS dalam satu laluan, mengalih keluar ulasan di luar nilai url(), meruntuhkan ruang putih, mengalih keluar koma bertitik berlebihan sebelum menutup pendakap, menggunakan trengkas sifar unit dan menukar warna heks enam digit kepada bentuk tiga digit jika boleh (#ffffff → #fff). Output kekal CSS sah yang mana-mana pelayar menghuraikan dengan betul.
Mengapa Kecilkan CSS
Fail CSS yang lebih kecil dimuatkan dengan lebih pantas dan masa menyekat pemaparan berkurangan, kedua-duanya meningkatkan skor Cat Kandungan Pertama dan Cat Kandungan Terbesar. Untuk tapak yang Core Web Vitals mempengaruhi kedudukan carian, setiap kilobait CSS penyekat pemaparan yang dicukur adalah berbaloi.
Kos lebar jalur juga penting pada skala. Tapak yang menyediakan berjuta-juta paparan halaman menjimatkan jumlah keluar yang boleh diukur apabila helaian gayanya 30% lebih kecil. Bil CDN, penggunaan data mudah alih dan penggunaan tenaga semuanya mendapat manfaat sedikit. Pengurangan pada asasnya adalah percuma — langkah binaan sekali sahaja tanpa kos penyelenggaraan.
Butiran Teknikal
Pengurangan CSS kebanyakannya adalah penyingkiran ruang kosong konservatif. Ruang putih di dalam pemilih, pengisytiharan dan nilai dikekalkan jika penting; ruang putih di luar diruntuhkan. Komen dialih keluar melainkan ia bermula dengan /*! (komen pemeliharaan lesen).
Pintasan biasa: 0px, 0em dan nilai unit sifar serupa menjadi 0; warna heks enam digit dengan digit berpasangan (#ffffff, #336699) menjadi tiga digit (#fff, #369); koma bertitik terakhir sebelum } dialih keluar. Nama warna tidak ditukar kepada heks secara automatik kerana hex kadangkala lebih panjang (merah lebih pendek daripada #f00 panjang; #ff0000 lebih panjang daripada merah).
Output harus lulus mana-mana pengesah CSS yang menerima input. Sokongan penyemak imbas tidak berubah — minification tidak mengubah suai peraturan itu sendiri, hanya perwakilan teksnya.
Soalan lazim
- Apakah yang dialih keluar oleh minification CSS?
- Ruang putih (ruang, tab, baris baharu), ulasan (/* ... */), koma bertitik yang tidak perlu, sifar berlebihan (0.5 → .5), pengoptimuman trengkas (#ffffff → #fff) dan unit berlebihan (0px → 0).
- Adakah CSS minified selamat digunakan dalam pengeluaran?
- ya. Minifikasi mengekalkan semua peraturan CSS, pemilih dan nilai harta. Outputnya adalah sama dari segi fungsi — pelayar mentafsirkannya dengan cara yang sama. Ini adalah amalan standard untuk semua tapak web pengeluaran.
- Berapa banyak pengurangan saiz yang perlu saya jangkakan?
- Biasanya 20-50% untuk CSS yang ditulis dengan baik. Kod yang banyak diulas dengan pemformatan verbose melihat pengurangan yang lebih besar. CSS yang sudah padat hanya boleh mengecut 10-15%.
- Patutkah saya memperkecilkan CSS jika saya menggunakan gzip?
- Ya, kedua-duanya. Gzip memampatkan corak berulang, manakala minifikasi mengalih keluar aksara yang tidak diperlukan. Bersama-sama mereka memberikan pemampatan yang lebih baik daripada sama ada bersendirian. CSS yang dikecilkan + gzip biasanya 85-95% lebih kecil daripada yang asal.
- Perlukah saya memperkecilkan sentiasa?
- Untuk pengeluaran ya. Untuk fail sumber pembangunan, tiada — CSS yang boleh dibaca adalah penting untuk penyelenggaraan. Jalankan minifikasi pada masa binaan, bukan pada masa edit.
- Adakah CSS saya dimuat naik ke pelayan?
- Tidak. Pemecil berjalan dalam penyemak imbas anda.
- Bagaimanakah ini dibandingkan dengan cssnano atau csso?
- cssnano dan csso ialah pemalam PostCSS untuk binaan pengeluaran; mereka menawarkan transformasi yang lebih agresif seperti menggabungkan peraturan berlebihan. Alat ini merangkumi pengurangan asas untuk penggunaan ad-hoc tanpa persediaan binaan.
- Adakah minifikasi memecahkan peta sumber?
- Minifikasi tidak menghasilkan peta sumber; alat ini hanya menghasilkan output yang dikecilkan. Untuk menyahpepijat CSS diperkecil dalam pengeluaran, hasilkan peta sumber sebagai sebahagian daripada binaan anda.