Initializing, please wait a moment

CSS Minifier vs Uglifier vs Tree-Shaking

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

Jawaban 30 detik. Tiga teknik pengurangan ukuran berbeda menargetkan tujuan yang sama tetapi bekerja pada lapisan berbeda. Minifier menghapus whitespace dan komentar. Uglifier mengubah nama simbol (variabel, nama fungsi) menjadi bentuk lebih pendek. Tree-shaking menghapus kode yang tidak pernah digunakan sisa bundle. Mereka bertumpuk: bundle yang sudah diminify-dan-uglify yang sudah tree-shake lebih kecil daripada teknik tunggal manapun.

Minifier - whitespace dan komentar

Minifier - whitespace dan komentar: CSS Minifier membuang karakter yang diabaikan browser - tidak mengganti nama selector atau membuang rule tak terpakai seperti uglifier/tree-shaker.

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

Uglifier - ubah nama untuk menghemat byte: memperpendek identifier jika aman - lebih berisiko di CSS daripada minify polos karena class harus cocok dengan HTML dan runtime.

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

Tree-shaking - hapus apa yang tidak ada yang menggunakan: build membuang export tak terpakai setelah analisis - butuh graf modul; CSS Minifier saja tidak bisa shake app.

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

Apa yang dicari pertama adalah CSS Minifier untuk stylesheet yang sudah Anda tulis; tree-shaking di build app; uglify sebagai langkah JS lanjutan, bukan perbaikan CSS pertama.

CSS Minifier di situs ini menangani langkah pertama - tempel stylesheet dan salin hasilnya; tidak ada yang meninggalkan perangkat Anda. Uglifikasi dan tree-shaking membutuhkan build tool (webpack, esbuild, atau Vite) yang dapat membaca grafik modul lengkap.

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.