Minify JavaScript dengan Terser
Minify JavaScript Anda dengan Terser untuk memperkecil ukuran file dan mempercepat situs Anda.
Sumber Anda tetap di perangkat
Tidak ada yang perlu dihapus kemudian
Dibangun untuk kode berhak milik
Jalan di semua browser modern
Cara kerjanya
- 1
Tempel JavaScript Anda
Sebuah modul, skrip, atau cuplikan yang ingin Anda perkecil sebelum terbit.
- 2
Periksa hasilnya
Bandingkan ukurannya dan baca peringatannya sebelum Anda mengganti apa pun.
- 3
Salin keluarannya
Bawa ke sebuah keluaran build, templat, atau tag skrip sebaris.
Mengapa memakai alat ini
Penamaan ulang lokal yang aman
Hanya pengikat yang seluruh rujukannya bisa dilihat alat ini yang dipendekkan, dan itulah yang menjaga keluarannya tetap bekerja.
Ukuran sebelum dan sesudah
Penghematan mentah ditampilkan di samping hasilnya setelah kompresi, dan itulah angka yang penting.
Galat sintaksis dilaporkan
Masukan tak sah mengatakan di mana ia gagal alih-alih menghasilkan keluaran yang patah saat dimuat.
Komentar dibuang, direktif tetap
Header lisensi dan `"use strict"` selamat, karena membuangnya diam-diam mengubah perilaku atau melanggar sebuah lisensi.
Tidak ada yang diunggah
Kodenya diproses di browser Anda, jadi sumber berhak milik tak pernah sampai ke server.
Gratis tanpa akun
Tanpa pendaftaran, tanpa watermark, dan tanpa batas seberapa banyak yang Anda minifikasi.
Penghematannya datang dari penamaan ulang, bukan dari menghapus spasi
Mengupas spasi dan komentar adalah bagian yang kelihatan dan bagian yang lebih kecil. Sebagian besar pengurangan pada berkas nyata datang dari pemendekan: tiap variabel lokal, parameter, dan nama fungsi diganti dengan satu atau dua karakter, sehingga `calculateTotalPrice` menjadi `t` dan basis kode yang deskriptif pun runtuh. Di situ pula seluruh risikonya tinggal. Sebuah minifier hanya bisa menamai ulang sebuah pengikat dengan aman ketika ia bisa melihat tiap tempat pengikat itu dirujuk, dan itu bisa untuk apa pun yang lingkupnya di dalam sebuah fungsi. Ia tak bisa melihat rujukan yang dibuat dari sebuah string, dan rujukan semacam itulah yang persis patah. Memahami satu pembedaan ini menjelaskan tiap kutu minifikasi yang mungkin Anda temui, dan memberi tahu Anda ke mana melihat ketika kode terminifikasi gagal sementara aslinya bekerja.
Yang tak boleh dinamai ulang, dan kenapa alatnya tak bisa tahu
Kasus-kasus yang berbahaya semuanya berbagi satu bentuk: sebuah nama yang tertulis sebagai teks di tempat yang tak dibaca minifier sebagai kode. Mengakses sebuah properti sebagai `obj["someKey"]` sementara menuliskannya `obj.someKey` di tempat lain berarti satu bentuk dinamai ulang dan yang lain tidak. Kunci objek yang harus cocok dengan muatan JSON dari sebuah API adalah masalah yang sama — namai ulang kuncinya dan permintaannya berhenti cocok dengan servernya. Kerangka kerja injeksi dependensi yang lebih lama membaca nama parameter untuk memutuskan apa yang disuntikkan, dan itulah sebabnya meminifikasi aplikasi AngularJS tanpa langkah anotasi adalah cara terkenal untuk merusaknya sepenuhnya. Apa pun yang memeriksa `Function.name` atau nama sebuah kelas saat runtime, termasuk sebagian kode serialisasi dan pencatatan, punya paparan yang sama. Aturan praktisnya: nama yang melintasi sebuah batas — muatan jaringan, templat, pencarian dengan string — harus dikutip dan dibiarkan.
Source map membuat keluarannya bisa ditelusuri, dan bisa membocorkan sumber Anda
Kode terminifikasi menghasilkan jejak tumpukan yang menunjuk baris 1, kolom 48.000, yang tak berguna. Source map adalah perbaikan bakunya: berkas terpisah yang memetakan posisi di keluarannya kembali ke aslinya, sehingga browser menampilkan kode yang Anda tulis. Hasilkan mereka — alternatifnya adalah menelusuri galat produksi secara buta. Bagian yang layak direncanakan adalah di mana map-nya tinggal. Sebuah source map memuat sumber asli Anda, biasanya termasuk komentar yang Anda hapus, dan kalau ia duduk di jalur yang bisa dijangkau publik dan dirujuk komentar di bagian bawah bundel Anda, siapa pun bisa mengambilnya dan membaca kode Anda yang belum terminifikasi. Itu tak masalah untuk sumber terbuka dan merupakan pengungkapan sungguhan pada kasus lain. Jawaban yang biasa adalah mengunggah map ke layanan pelacak galat Anda dan tak menyajikannya secara publik, atau membatasinya pada permintaan yang terautentikasi.
Minifikasi bukan obfuskasi dan tak melindungi apa pun
Layak dinyatakan terus terang karena keyakinannya lazim: memendekkan nama tak menyembunyikan logika. Kode terminifikasi bisa diindentasi ulang oleh pemformat mana pun dalam satu langkah, dan meski namanya sudah hilang, strukturnya, string-nya, endpoint API-nya, dan algoritmenya semuanya utuh dan terbaca. Siapa pun yang ingin memahami kode sisi klien Anda akan memahaminya, dan akan melakukannya dalam beberapa menit. Ini penting karena ia menuntun pada kekeliruan nyata — kunci API yang di-commit ke dalam bundel dengan anggapan minifikasi menyembunyikannya, atau flag fitur yang diperiksa di sisi klien dan diperlakukan sebagai kendali akses. Kalau sebuah kode atau nilai harus tetap rahasia, ia sama sekali tak boleh dikirim ke browser; satu-satunya batas yang tepercaya adalah server Anda. Obfuscator yang disengaja memang ada dan menaikkan usaha sedikit, dengan biaya serius pada ukuran dan kecepatan, dan itu tak mengubah kesimpulan tersebut.
Kompresi di jaringan melakukan sebagian besar yang dikreditkan pada minifikasi
Membingkai minifikasi sebagai penghematan lebar pita sudah tertinggal sedasawarsa, karena semuanya kini disajikan dengan gzip atau brotli, dan algoritme itu sangat baik justru pada apa yang dihapus minifikasi. Spasi berulang dan pengenal panjang berulang terkompresi hingga nyaris nol, jadi berkas terminifikasi dan yang terformat sering berbeda jauh lebih sedikit setelah kompresi dibanding sebelumnya — itulah sebabnya ukuran yang penting adalah yang terkompresi, dan sebabnya alat ini menampilkan keduanya. Minifikasi tetap layak tempatnya karena dua alasan lain: lebih sedikit sumber berarti lebih sedikit yang harus diurai dan dikompilasi browser sebelum apa pun berjalan, yang terukur di ponsel; dan bitanya juga lebih kecil sebelum kompresi. Tetapi kalau Anda memilih ke mana mencurahkan usaha untuk ukuran bundel, menghapus kode yang tak terpakai mengalahkan pemendekan nama dengan selisih lebar.
Kenapa meminifikasi secara lokal penting untuk jenis teks ini
Masukan sebuah minifier adalah kode sumber, dan kode sumber adalah hal yang paling tak ingin diterbitkan sebuah perusahaan. Ia membawa alamat endpoint Anda, nama fungsi dan modul internal Anda, komentar yang menjelaskan untuk apa sebuah tambalan dibuat, sesekali sebuah kunci yang seharusnya tak ada di sana, dan struktur sebuah sistem yang perancangannya memakan usaha sungguhan. Menempelkan berkas berhak milik ke minifier yang dihosting mengirim semua itu ke pihak ketiga demi pengurangan ukuran yang bisa Anda peroleh secara lokal. Alat ini memproses kodenya di halaman dan tak mengirimkan apa pun, yang bisa Anda pastikan di tab Network pada developer tools — dan untuk satu jenis teks yang secara harfiah merupakan kekayaan intelektual pemberi kerja Anda, itulah bawaan yang masuk akal.
Kesalahan umum yang sebaiknya dihindari
- Mencampur `obj.someKey` dan `obj["someKey"]` untuk properti yang sama. Satu bentuk dinamai ulang dan yang lain tidak, jadi keduanya berhenti merujuk ke hal yang sama setelah minifikasi.
- Menamai ulang kunci yang harus cocok dengan muatan jaringan. Kunci objek yang dikirim ke atau diterima dari sebuah API dicocokkan sebagai string oleh servernya — kutip agar pemendeknya tak menyentuhnya.
- Bersandar pada nama parameter atau fungsi saat runtime. Injeksi dependensi berdasarkan nama parameter dan logika yang membaca `Function.name` sama-sama patah, karena nama itulah yang persis diganti pemendekan.
- Menerbitkan source map ke jalur publik. Sebuah source map memuat kode asli Anda termasuk komentar yang dihapus — unggah ke pelacak galat Anda alih-alih menyajikannya di samping bundelnya.
- Memperlakukan minifikasi sebagai perlindungan. Kode terminifikasi terindentasi ulang dalam satu langkah dan string, endpoint, serta algoritmenya masih terbaca, jadi tak ada yang rahasia boleh dikirim ke browser.
Perbandingan
| Aspek | Alat ini | Minifier daring | Sebuah pipeline build |
|---|---|---|---|
| Sumber dikirim ke server | Tidak pernah | Umumnya ya | Tidak |
| Ukuran terkompresi ditampilkan | Ya | Jarang | Dengan pengaya |
| Perlu penyiapan | Tidak ada | Tidak ada | Konfigurasi |
| Menghapus kode tak terpakai | Tidak | Tidak | Ya |
| Akun atau pendaftaran | Tidak perlu | Kadang diminta | Tidak perlu |
| Harga | Gratis | Gratis / paket berbayar | Gratis |
Fitur
Pemendekan pengenal
Nama variabel dan fungsi lokal dipendekkan, dan dari situlah sebagian besar pengurangannya datang.
Penghapusan spasi dan komentar
Segala yang diabaikan pengurai dibuang, termasuk ganti baris yang membuat berkasnya terbaca.
Pengukuran yang sadar kompresi
Ukuran terminifikasi dan ukuran terkompresi, karena hanya yang kedua yang sampai ke pengguna.
Sintaksis modern didukung
Kelas, fungsi panah, templat literal, perantaian opsional, dan sintaksis modul semuanya dipahami.
Mampu menangani berkas besar
Bundel utuh terminifikasi tanpa unggahan maupun plafon ukuran.
Pemformatan terbalik
Ada mode mempercantik juga, karena membaca kode pihak ketiga yang terminifikasi adalah kebutuhan yang umum.
Tanpa instalasi
Tanpa alat build, tanpa runtime, tanpa dependensi — jalan di halaman web.
Ramah Arab dan RTL
Antarmuka lengkap dalam delapan bahasa, termasuk Arab kanan-ke-kiri.
Aman secara bawaan
Disajikan lewat HTTPS, tanpa pelacakan konten dan tanpa unggahan ke pihak ketiga.
Siapa yang memakainya
Pengembang front-end
Mengecilkan skrip mandiri yang tak melewati langkah build.
Insinyur performa web
Membandingkan ukuran terminifikasi dan terkompresi untuk melihat di mana penghematannya sebenarnya.
Pengembang yang membaca kode pihak ketiga
Memakai arah mempercantik agar pustaka terminifikasi cukup terbaca untuk diikuti.
Siapa pun yang menyisipkan skrip
Menurunkan cuplikan kecil ke ukuran yang wajar untuk ditanam di sebuah halaman.
Pertanyaan yang Sering Diajukan
Tidak. Semuanya berjalan lokal di browser Anda — teks Anda tidak pernah diunggah, disimpan, atau dibagikan.
Ya — sepenuhnya gratis, tanpa akun dan tanpa batas.