JS pemampat

JS pemampat adalah alat gratis yang menghapus karakter yang tidak diperlukan dari JavaScript serta menampilkan jumlah karakter sebelum dan sesudah pemampatan.

Masalah apa yang diatasi oleh pemampatan JavaScript?

Pemampatan JavaScript mengurangi jumlah kode sumber yang harus diunduh browser. Proses ini biasanya menghapus pemformatan seperti indentasi, baris baru, dan spasi jika karakter tersebut tidak diperlukan oleh sintaks JavaScript.

Skrip yang lebih kecil dapat mengurangi ukuran transfer dan beban penguraian, terutama jika sebuah situs mengirimkan beberapa bundel berukuran besar. Kompresi HTTP seperti Brotli atau gzip tetap penting karena pemampatan dan kompresi transfer menangani bagian masalah yang berbeda. Pemampatan menghapus karakter dari kode sumber, sedangkan kompresi mengodekan data berulang secara lebih ringkas selama transfer.

Proses ini biasanya dilakukan saat build sebelum deployment. Alat ini juga berguna untuk memeriksa skrip pihak ketiga yang belum dimampatkan, membandingkan ukuran bundel, atau menyiapkan file mandiri bagi situs yang tidak memiliki pipeline build.

Keberhasilan pemampatan tidak membuktikan bahwa JavaScript berfungsi dengan benar. Skrip bisa berhasil dimampatkan tetapi masih berisi pemanggilan API yang keliru, variabel yang tidak dapat diakses, atau kode yang baru gagal saat dijalankan.

Bagaimana cara menggunakan JS pemampat?

Tempelkan JavaScript ke kolom JS, jalankan alat, lalu salin nilai yang muncul di JS yang diminifikasi. Simpan file sumber asli dalam kontrol versi dan gunakan salinan ringkas untuk deployment, bukan mengganti sumber yang mudah dibaca.

1. Jalankan pemeriksaan sintaks, linter, dan pengujian otomatis pada kode sumber terlebih dahulu.
2. Tempelkan skrip lengkap ke JS, termasuk impor modul atau fungsi pembungkus yang menjadi bagian file tersebut.
3. Periksa Karakter JS dan Karakter JS yang diminifikasi untuk melihat perubahan jumlah karakter.
4. Uji apakah JavaScript yang telah dimampatkan berjalan dengan benar di browser dan lingkungan deployment yang sama dengan file produksi.
5. Gunakan nama file yang mudah dikenali, seperti app.min.js, jika versi ringkas dan versi yang mudah dibaca akan disimpan bersama.

Pemrosesan dilakukan di server. Input dikirim ke server melalui HTTPS dan tidak disimpan. Server tetap harus menerima JavaScript tersebut untuk memprosesnya, jadi jangan kirim kode sumber yang menurut kebijakan organisasi tidak boleh dikirim ke layanan eksternal.

Apa isi hasil yang telah dimampatkan?

Hasilnya berisi JavaScript yang telah diringkas dan dua jumlah karakter. Karakter JS menunjukkan panjang input, sedangkan Karakter JS yang diminifikasi menunjukkan panjang hasil dalam JS yang diminifikasi.

Jumlah tersebut dihitung menggunakan fungsi mb_strlen milik PHP, yang mengukur panjang string multibita dan bukan sekadar melaporkan jumlah bita. Karena itu, jumlah karakter tidak sama dengan ukuran akhir transfer melalui jaringan. Karakter UTF-8 dapat menggunakan lebih dari satu bita, dan gzip atau Brotli dapat memperkecil lagi file yang dikirimkan.

Alat ini tidak menyediakan kolom validasi atau diagnostik terpisah. Jangan berharap alat ini mendeteksi setiap kurung yang hilang, ekspresi reguler yang salah format, atau fitur bahasa yang tidak didukung. Secara khusus, kesalahan yang berkaitan dengan JSON, seperti nama properti tanpa tanda kutip atau koma penutup, bukan pemeriksaan JavaScript yang andal karena sintaks literal objek JavaScript berbeda dari sintaks JSON. Gunakan Validator & pemercantik JSON untuk data JSON.

Contoh sederhana dan input yang rumit

Perubahan spasi sederhana dapat digambarkan sebagai berikut.

Input

function add(a, b) { return a + b; }

Bentuk ringkas

function add(a,b){return a+b;}

Pemformatan di sekitar objek juga dapat dihapus tanpa mengubah nilai propertinya.

Input

const settings = { theme: "dark", retries: 2 };

Bentuk ringkas

const settings={theme:"dark",retries:2};

Pemformatan persisnya dapat berbeda antara satu pemampat dan lainnya, terutama dalam penggunaan titik koma opsional. JavaScript tidak dapat diringkas secara aman hanya dengan menghapus semua spasi atau baris baru. Pemampatan yang aman harus memperhitungkan konteks leksikal dan sintaksis agar dapat membedakan pemformatan dari karakter yang memengaruhi program.

• Spasi dalam string merupakan bagian dari data. Spasi dalam "Newcastle upon Tyne" harus dipertahankan.
• Tanda baca dapat menjadi bagian sintaks. Menghapus spasi dari a + +b dapat menghasilkan urutan token yang berbeda.
• Baris baru terkadang memengaruhi penyisipan titik koma otomatis, termasuk pada kode setelah return, break, atau continue. Baris baru tepat setelah throw tidak diizinkan karena ekspresinya harus dimulai pada baris yang sama.
• Karakter beraksen dan non-Latin dapat muncul dalam string dan, jika diizinkan oleh aturan identifier JavaScript, dalam identifier. Ukuran bitanya dapat berbeda dari jumlah karakternya.
• Angka merupakan token kode sumber, bukan petunjuk penghitungan karakter. Pemampat harus mempertahankan nilai numeriknya meskipun memilih notasi setara yang lebih pendek.

Kapan JavaScript tidak perlu dimampatkan?

Pemampatan biasanya tidak perlu diulang jika sebuah file sudah dimampatkan. Proses kedua mungkin hanya menghemat sedikit atau tidak sama sekali, sekaligus membuat hasil build lebih sulit dilacak dan berpotensi mengganggu source map yang sudah ada.

JavaScript yang hanya akan dibaca mesin juga tidak perlu dirapikan lalu dimampatkan kembali. Simpan kode sumber yang mudah dibaca untuk pemeliharaan, lalu hasilkan artefak deployment dari sumber tersebut. Untuk aplikasi yang sudah mapan, alat build seperti esbuild, Rollup, atau webpack umumnya lebih sesuai karena dapat mengotomatiskan penggabungan modul dan pembuatan source map. Fitur pemampatan mungkin sudah tersedia atau dapat ditambahkan melalui konfigurasi maupun plugin, sedangkan Terser merupakan pemampat khusus.

Jangan menganggap pemampatan sebagai obfuscation atau kontrol akses. Nama fungsi dan variabel mungkin tetap terlihat, literal string masih dapat dibaca, dan alat pengembang browser dapat memformat ulang kode yang ringkas. Rahasia, kunci privat, dan kredensial dengan hak istimewa tidak boleh disematkan dalam JavaScript sisi klien.

Jika kamu sedang menyiapkan semua aset statis sebuah halaman, Peminifikasi CSS dan Peminifikasi HTML dapat menerapkan proses serupa pada masing-masing format. Gunakan alat terpisah untuk setiap format karena aturan penguraian dan spasinya berbeda.

Pertanyaan yang sering diajukan

Apakah alat ini membuat source map?

Tidak ada kolom source map dalam hasil. Jika stack trace produksi perlu dipetakan kembali ke file asli, buat skrip yang dimampatkan dan file .map pasangannya dalam proses build yang sama. Menggunakan source map dari build berbeda dapat menghasilkan referensi baris dan kolom yang menyesatkan.

Apakah pemampatan bisa mencegah orang menyalin JavaScript saya?

Tidak. Browser harus menerima kode sisi klien yang dapat dijalankan, sehingga pengunjung dapat mengunduh dan memeriksanya. Pemampatan membuat kode sumber lebih sulit dibaca, tetapi tidak memberikan kerahasiaan, penegakan lisensi, atau perlindungan berarti bagi rahasia yang disematkan.

Bolehkah saya menempelkan kode yang berisi kunci API?

Jangan tempelkan kunci API rahasia, token, atau kredensial privat. Input dikirim melalui HTTPS dan tidak disimpan, tetapi pemrosesan berlangsung di server. Kunci browser publik yang memang dibagikan kepada setiap pengunjung tetap memerlukan pembatasan domain, origin, kuota, atau izin jika layanan terkait mendukungnya.

Apakah jumlah karakter yang lebih sedikit selalu mempercepat pemuatan halaman?

Tidak. Dampaknya bergantung pada ukuran file asli, cache, kondisi koneksi, kompresi server, serta banyaknya JavaScript yang harus diurai dan dijalankan browser. Selain jumlah karakter, periksa juga ukuran transfer setelah kompresi dan perilakunya saat dijalankan.

Apakah ekstensi .js harus tetap digunakan setelah pemampatan?

Ya. JavaScript yang telah dimampatkan biasanya tetap menggunakan ekstensi .js, sedangkan .min.js digunakan sebagai konvensi penamaan jika kedua versi tersedia. Sebelum deployment, pastikan server mengirimkan jenis konten JavaScript yang sesuai dan HTML atau impor modul mengarah ke file yang dimaksud.