Minikan CSS _

Cara peminifikasian CSS berfungsi

Minifier melalui helaian gaya anda dengan tokeniser yang sedar keadaan yang membezakan kawasan dilindungi (literal rentetan dan nilai url()) daripada ruang kosong yang boleh diruntuhkan dan dibuang dengan selamat.

1. Lindungi rentetan dan URL. Sebelum sebarang transformasi lain, tokeniser mengenal pasti setiap rentetan berpetikan ("…" atau '…') dan setiap argumen url(…) dan menyimpannya secara verbatim. Laluan seterusnya tidak pernah menyentuh bait ini, jadi URL background-image dengan ruang atau sifat content dengan tanda baca dipelihara dengan tepat.
2. Buang komen. Blok /* … */ dibuang apabila togol dihidupkan. Jika togol komen lesen juga dihidupkan, blok /*! … */ kekal supaya pengepala lesen MIT, Apache, dan BSD kekal dalam output seperti yang dikehendaki oleh lesen tersebut.
3. Runtuhkan ruang kosong. Setiap deretan ruang, tab, dan baris baharu diruntuhkan kepada satu ruang, kemudian ruang kosong di sekeliling aksara struktur CSS {, }, ;, :, dan , dibuang sepenuhnya. Senarai pemilih dan nilai mengalir semula seperti cara penghurai pelayar membacanya.
4. Optimumkan nilai. Laluan pilihan menukar kod warna hex kepada huruf kecil, meruntuhkan saluran hex 6-digit berpasangan kepada singkatan 3-digit (#aabbcc → #abc), dan membuang unit dimensi daripada nilai sifar (0px → 0). Laluan unit sifar melangkau nilai dalam panggilan transform() di mana unit adalah signifikan.
5. Laporan penjimatan bait. Kedua-dua teks asal dan yang diminikan diukur dengan new TextEncoder().encode(…).byteLength, kiraan bait UTF-8 yang sama yang dilihat oleh CDN atau pelayan HTTP pada wayar. Jalur metrik menunjukkan saiz asal, saiz diminikan, bait yang disimpan, dan peratusan penjimatan.

Mengapa minikan CSS

• Muat lebih pantas tanpa sekatan render. Pelayar tidak akan melukis satu piksel pun sehingga mereka selesai menghurai CSS. Pengurangan helaian gaya sebanyak 30 peratus memendekkan sekatan itu, meningkatkan First Contentful Paint, dan muncul terus dalam skor Prestasi Lighthouse anda.
• Bil keluar CDN yang lebih rendah. CloudFront, Cloudflare, dan Fastly semuanya mengenakan caj setiap gigabait keluar. Mengurangkan 20 peratus daripada helaian gaya yang dihantar pada setiap paparan halaman menjadi baris nyata dalam invois apabila trafik bulanan melebihi beberapa juta paparan.
• Benam dan CSS e-mel yang lebih kecil. Templat e-mel transaksi menyisipkan CSS mereka untuk bertahan daripada keanehan rendering Outlook dan Gmail, dan setiap bait tambahan mendorong anda lebih dekat kepada ambang klip 102 KB Gmail. Meminikan sebelum menyisipkan mengekalkan mesej di bawah had.
• Tiada kebergantungan alat binaan. Tugas sekali gus yang pantas, repositori lama tanpa saluran paip binaan, dan persekitaran terpencil tidak selalu mempunyai ruang untuk rantai alat Node. Anda boleh menjalankan laluan di sini tanpa memasang PostCSS, cssnano, atau apa-apa lagi.

Aplikasi biasa

Peminifikasian CSS muncul pada penghujung hampir setiap saluran paip binaan front-end dan dalam beberapa konteks masa jalan di mana kiraan bait penting.

• Saluran paip binaan pengeluaran: Webpack, Vite, Rollup, dan Parcel semuanya menghantar langkah peminifikasian CSS dalam lalai mod pengeluaran mereka. Menjalankan laluan di sini sebelum komit membolehkan anda mengesahkan output tanpa mencetuskan binaan penuh.
• Membenamkan CSS dalam tag <style>: rangka kerja yang dirender oleh pelayan yang menyisipkan CSS kritikal ke dalam dokumen HTML mendapat manfaat penjimatan bait yang sama seperti helaian gaya bebas, dan CSS sebaris yang lebih kecil mengurangkan Masa kepada Bait Pertama.
• E-mel transaksi dan pemasaran: HTML e-mel menyisipkan semua CSS, jadi setiap kilobait dalam helaian gaya menambah jumlah saiz mesej. Meminikan sebelum menyisipkan mengekalkan mesej jauh di bawah had saiz ESP.

Contoh yang dikerjakan

Tampalkan set peraturan 1 KB dengan indentasi dua ruang, baris kosong antara pemilih, blok komen lesen di bahagian atas, dan warna hex panjang seperti #FFFFFF serta margin berpadding sifar seperti margin: 0px. Dengan setiap pilihan dihidupkan, output diruntuhkan kepada kira-kira 600 bait — penjimatan 40 peratus — sementara halaman yang dirender kelihatan sama bait dengan sumber.

Adakah peminifikasian mengubah tingkah laku CSS saya?

Tidak, pada togol lalai. Minifier hanya membuang bait yang sudah dibuang oleh penghurai CSS — ruang kosong, komen, titik koma terakhir pilihan — dan melangkau dalam transform() di mana unit adalah signifikan. Setiap pemilih, sifat, dan nilai dipelihara.

Adakah ia berfungsi dengan SCSS atau LESS?

Hanya selepas anda mengkompilnya kepada CSS biasa. Sintaks SCSS dan LESS (pemboleh ubah, penyarangan, mixin, pemilih induk &) bukan CSS yang sah dan minifier akan merosakkannya. Kompilkan sumber prapemproses anda dahulu, kemudian tampalkan output yang dikompil di sini.

Mengapa komen lesen saya dibuang?

"Buang komen" dihidupkan secara lalai dan membersihkan setiap blok /* … */. Aktifkan "Kekalkan /*! komen lesen" untuk mengekalkan blok yang bermula dengan /*!. MIT, Apache, dan BSD semuanya memerlukan pengepala hak cipta dihantar bersama CSS yang diedarkan semula.

Berapa banyak yang boleh saya jimatkan?

CSS yang ditulis secara manual biasanya jatuh 15 hingga 35 peratus. Fail yang banyak dikomentari atau diindent dengan mendalam dengan banyak literal warna boleh mencapai 40 peratus. Output yang dikompil daripada Sass atau CSS-in-JS sering sudah diminikan sebahagiannya dan menjimatkan lebih sedikit — biasanya 5 hingga 15 peratus.

Jalankan peminifikasian CSS dalam tab pelayar dan anda melangkau rantai alat Node sepenuhnya. Tampalkan helaian gaya di atas, togolkan pilihan untuk memadankan tahap keagresifan yang anda mahukan, kemudian salin output atau muat turunnya sebagai .min.css. Tiada muat naik, tiada akaun, tiada perpustakaan vendor.