File lebih kecil untuk produksi, kode mudah dibaca untuk debugging
Minifier ini memperkecil CSS, JavaScript, dan HTML untuk produksi dan menunjukkan dengan tepat berapa yang Anda hemat: ukuran asli, ukuran setelah minify, dan ukuran setelah gzip, yaitu yang benar-benar diunduh pengunjung Anda. JavaScript di-minify dengan terser, minifier yang dipakai sebagian besar build tool modern, dan CSS dengan csso, yang juga menggabungkan aturan duplikat. Beralih ke Beautify untuk mengubah bundle atau stylesheet yang sudah di-minify kembali menjadi kode berindentasi yang mudah dibaca. Kode Anda diproses di browser dan tidak pernah diunggah.
Cara minify atau merapikan kode
- 1Pilih bahasa: CSS, JavaScript, atau HTML. Menjatuhkan file
.css,.js, atau.htmlke input akan memilihnya secara otomatis. - 2Pilih Minify untuk memperkecil kode atau Beautify untuk merapikannya.
- 3Sesuaikan opsi: untuk JavaScript, apakah nama di-mangle dan kode dikompres; untuk CSS, apakah aturan direstrukturisasi; untuk HTML, apakah style dan script inline ikut di-minify. Komentar lisensi tetap dipertahankan kecuali Anda mematikannya.
- 4Lihat ukuran di bawah hasil untuk mengetahui penghematan sebelum dan sesudah gzip.
- 5Salin output atau unduh sebagai
.min.js,.min.css, atau.html.
Apa yang dilakukan minifikasi
Minifikasi menghapus semua yang tidak dibutuhkan browser untuk menjalankan kode: komentar, indentasi, baris baru, dan titik koma opsional. Minifier yang baik melangkah lebih jauh. terser mengganti nama variabel lokal menjadi satu huruf (mangling), menghapus kode yang tidak terjangkau, menghitung ekspresi konstan, dan meringkas pernyataan if menjadi ternary. csso memperpendek warna (#ff0000 menjadi red), membuang satuan pada nilai nol, dan menggabungkan aturan dengan deklarasi atau selector yang sama.
Hasilnya berperilaku persis seperti aslinya, tetapi biasanya 30–70% lebih kecil untuk JavaScript dan 15–40% lebih kecil untuk CSS sebelum kompresi.
Mengapa ukuran gzip penting
Server web dan CDN mengompres file teks dengan gzip atau Brotli sebelum mengirimnya, jadi angka yang memengaruhi waktu muat adalah ukuran terkompresi, bukan ukuran mentah. Kompresi sudah menghilangkan banyak pengulangan yang juga disasar minifikasi, itulah sebabnya penghematan minifikasi 60% bisa menyusut menjadi 20% setelah gzip. Itu tetap layak didapat di setiap tampilan halaman, dan mangling khususnya tetap memberi manfaat setelah kompresi.
Angka gzip di sini memakai level 6, bawaan nginx dan sebagian besar server. Brotli biasanya 10–20% lebih kecil lagi.
Penjelasan opsi
- Mangle nama
- Mengganti nama variabel lokal dan parameter fungsi menjadi nama pendek. Nama global dan properti objek tidak pernah diganti, sehingga kode yang dipanggil script lain tetap berfungsi.
- Kompres
- Untuk JavaScript, tahap optimasi terser: penghapusan kode mati, constant folding, inlining. Untuk CSS, restrukturisasi csso, yang menggabungkan dan mengurutkan ulang aturan jika aman.
- Pertahankan komentar lisensi
- Mempertahankan komentar yang diawali /*! atau berisi @license atau @preserve, yang wajib dipertahankan menurut banyak lisensi open source.
- CSS dan JS inline
- Di HTML, me-minify isi elemen <style> dan <script> serta atribut style. Blok JSON-LD juga dipadatkan; script dengan tipe lain dibiarkan apa adanya.
- Hapus tanda kutip atribut
- Menulis class=nav alih-alih class="nav" jika HTML mengizinkannya. HTML tetap valid, tetapi beberapa tool XML dan sistem templating tidak menyukainya, jadi opsi ini mati secara default.
Cara HTML di-minify
Minifikasi HTML di sini sengaja dibuat konservatif. Komentar dihapus, kecuali komentar kondisional Internet Explorer. Deretan spasi diringkas menjadi satu spasi, dan spasi di sebelah elemen blok seperti <div> dan <p>, yang memang tidak pernah ditampilkan, dihapus. Satu spasi selalu dipertahankan di antara elemen inline, karena menghapusnya akan menyatukan <b>big</b> <i>world</i> menjadi satu kata. Isi <pre> dan <textarea> tidak pernah diubah.
Jika script inline memiliki syntax error, script itu dibiarkan persis seperti semula dan Anda diberi tahu di baris mana errornya, alih-alih seluruh halaman gagal diproses.
Merapikan kode yang sudah di-minify
Beautify memakai js-beautify untuk mengindentasi ulang kode: satu pernyataan per baris untuk JavaScript, satu deklarasi per baris untuk CSS, dan indentasi bersarang untuk HTML. Ini cara tercepat untuk membaca script pihak ketiga yang sudah di-minify atau memahami stylesheet yang disalin dari browser. Beautify tidak bisa mengembalikan nama variabel asli atau komentar yang dihapus minifier, tetapi strukturnya jadi mudah diikuti.
Untuk format lain, lihat JSON Formatter dan SQL Formatter.
Pertanyaan yang sering diajukan
- Apakah kode saya diunggah ke suatu tempat?
- Tidak. terser, csso, dan js-beautify berjalan di browser Anda, jadi kode Anda tetap di perangkat Anda.
- Apakah JavaScript yang sudah di-minify tetap berfungsi?
- Ya. terser hanya membuat perubahan yang mempertahankan perilaku kode. Kode yang bergantung pada nama fungsi atau class saat runtime, seperti beberapa framework dependency injection, mungkin perlu mangling dimatikan.
- Apakah mendukung JavaScript modern dan ES modules?
- Ya. terser memahami sintaks modern termasuk class, async/await, optional chaining, dan top-level await. File dengan pernyataan import atau export di-minify sebagai ES module.
- Bisakah me-minify TypeScript atau JSX?
- Tidak. Kompilasi TypeScript atau JSX ke JavaScript terlebih dahulu, lalu minify hasilnya. Syntax error beserta baris dan kolomnya akan ditampilkan jika kode bukan JavaScript biasa.
- Apa bedanya minify dan gzip?
- Minify menulis ulang kode itu sendiri agar lebih pendek. Gzip adalah kompresi yang diterapkan server pada file apa pun saat mengirimnya. Keduanya saling melengkapi: minify dulu, lalu biarkan server mengompres.
- Bisakah saya meng-unminify JavaScript atau CSS?
- Bisa. Pilih Beautify untuk mengindentasi ulang kode yang sudah di-minify. Nama variabel dan komentar asli tidak bisa dipulihkan, tetapi strukturnya jadi mudah dibaca.
- Mengapa aturan CSS saya digabung atau diurutkan ulang?
- Itu adalah restrukturisasi csso, yang menggabungkan aturan dengan deklarasi atau selector yang sama. Aman untuk stylesheet biasa; matikan Kompres jika Anda bergantung pada urutan aturan yang tepat antar selector dengan spesifisitas yang sama.