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

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.

Last reviewed: 2026-08-04

FreetoolOnline editorial team

Pertanyaan yang sering diajukan

Apakah saya perlu menjalankan ketiga teknik ini?

Tidak - pilih sesuai pipeline Anda. Stylesheet yang hanya ditempel hanya butuh minifier; app dengan bundler diuntungkan dengan menambahkan uglifikasi dan tree-shaking di atasnya.

Apakah tree-shaking bekerja pada CSS murni tanpa build tool?

Tidak sepenuhnya - tree-shaking sejati membutuhkan graf modul dari sebuah bundler. Untuk CSS saja, yang paling mendekati adalah PurgeCSS atau mode JIT Tailwind, yang memindai HTML Anda dan hanya menyimpan class yang benar-benar digunakan.