CSS Minifier vs Uglifier vs Tree-Shaking

Terakhir ditinjau: 2026-04-27. Buka CSS minifier untuk minifikasi di browser tanpa mengunggah kode sumber.

Minifier - whitespace dan komentar

Taktik paling sederhana: ambil 10 KB CSS atau JS yang diformat dan hapus setiap spasi, baris baru, dan komentar yang tidak memengaruhi parsing. Output bekerja identik dengan input tetapi menempati 30-50% lebih sedikit ruang. Ini yang dilakukan CSS minifier untuk stylesheet.

Minifier CSS modern melangkah lebih jauh dari whitespace: meruntuhkan 0px ke 0, mengganti #ffffff dengan #fff, menghapus nilai default berlebih, menggabungkan selector berdekatan dengan aturan identik. Masing-masing mengurangi persentase kecil; efek kumulatifnya bermakna.

Uglifier - ubah nama untuk menghemat byte

Khusus untuk JavaScript. Mengambil const calculateMonthlyTotal = ... dan mengubah namanya menjadi const a = .... Nama lebih pendek lebih kecil. Diulang melintasi ribuan pengidentifikasi, penghematan bertumpuk.

Uglifier membutuhkan pemahaman aturan lingkup kode - Anda dapat mengganti nama variabel lokal dengan bebas, tetapi mengganti nama global memecahkan apa pun yang bergantung pada nama. Alat seperti Terser, esbuild, dan SWC melakukan ini dengan aman dengan menganalisis grafik lingkup.

Untuk CSS, ekuivalennya adalah mengubah nama kelas. Pipeline build yang meng-hash kelas CSS menjadi .a, .b, .c menghemat byte dengan cara yang sama - tetapi hanya bekerja ketika HTML dibangun dengan pipeline yang sama sehingga referensi cocok.

Tree-shaking - hapus apa yang tidak ada yang menggunakan

Yang besar. Ketika Anda mengimpor pustaka dan menggunakan satu fungsi dari lima puluh, bundling naif mengirim semua lima puluh. Tree-shaking menganalisis grafik impor dan menyertakan hanya fungsi yang sebenarnya dipanggil oleh entry point aplikasi Anda. Empat puluh sembilan fungsi menghilang dari bundle output.

Tree-shaking membutuhkan kode sumber dalam format yang mendukung analisis - modul ES asli ("import" / "export") daripada CommonJS ("require"). Penulis pustaka telah menghabiskan bertahun-tahun bermigrasi ke ESM khusus untuk membuat tree-shaking efektif bagi konsumen mereka.

Untuk CSS, tree-shaking memiliki paralel yang disebut PurgeCSS atau mode JIT TailwindCSS: memindai HTML dan hanya menyertakan aturan CSS yang cocok dengan nama kelas aktual dalam markup. Tailwind mengirimkan ribuan kelas utilitas; build produksi hanya menyertakan yang digunakan.

Apa yang dicari pertama

Gunakan ketiganya ketika pipeline build mendukung mereka. Urutannya: tree-shake terlebih dahulu (menghilangkan potongan terbesar), lalu minify dan uglify hasilnya. Bundler modern (Vite, esbuild, Rollup, Webpack 5+) melakukan ketiganya dalam satu lewatan dengan satu flag konfigurasi.

Untuk proyek non-bundled di mana Anda hanya ingin stylesheet lebih kecil, jalankan CSS minifier pada CSS akhir. Untuk konten lebih luas tentang teknik-teknik ini, lihat CSS minifier vs compressor atau cara meminify CSS dan JS untuk Cloud Run cold start. Set lengkap: hub alat pengembang.