Lewati ke konten
🛠️
Whiz Tools

Pengecil JavaScript - Pengoptimal Kode JS Gratis Online

Alat pengecil JavaScript gratis untuk mengurangi ukuran kode dengan menghapus spasi dan komentar. Optimalkan file JS secara instan tanpa instalasi.

Minifier JavaScript

Tentang alat ini

Minifier JavaScript sederhana ini menghapus spasi dan komentar yang tidak perlu untuk mengurangi ukuran kode Anda. Ini mempertahankan fungsionalitas sambil membuat kode Anda lebih padat.

  • Menghapus spasi yang tidak perlu (spasi, tab, baris baru)
  • Menghapus komentar (satu baris dan multi-baris)
  • Mempertahankan literal string dan ekspresi reguler
  • Menjaga fungsionalitas kode
Kalkulator pemuatan...
📚

Dokumentasi

Apa itu minifier JavaScript?

Minifier JavaScript adalah alat yang mengecilkan kode sumber JavaScript dengan menghapus karakter yang tidak diperlukan browser untuk menjalankannya, seperti spasi tambahan, baris baru, dan komentar. Kode tersebut tetap berfungsi persis sama setelah diminifikasi. Hanya ukuran berkasnya yang berubah.

Berkas JavaScript yang lebih kecil diunduh dan dimuat lebih cepat, sehingga minifikasi merupakan langkah umum sebelum situs web dipublikasikan.

Cara kerja minifikasi JavaScript

Alat ini membaca kode satu karakter demi satu karakter lalu menyusunnya kembali, dengan menghapus apa pun yang diperlukan pembaca tetapi tidak diperlukan mesin JavaScript. Alat ini menghapus:

  • Komentar, baik komentar // single-line maupun komentar /* multi-line */, termasuk komentar bergaya JSDoc.
  • Spasi tambahan, tab, dan baris kosong yang hanya ada agar kode lebih mudah dibaca.

Alat ini tidak menambahkan atau menghapus hal lain. Alat ini tidak pernah menghapus titik koma, tanda kurung, atau karakter lain apa pun yang sudah ada dalam kode, dan tidak pernah menyisipkan tanda baca baru. Alat ini juga membiarkan beberapa hal tanpa perubahan:

  • Teks di dalam string ("like this", 'like this') dan literal templat (`like this`), meskipun teks tersebut mengandung spasi atau tampak seperti komentar.
  • Literal ekspresi reguler, seperti /[a-z]+/g, beserta semua flag-nya: d, g, i, m, s, u, v, dan y.
  • Setiap titik koma, koma, dan tanda kurung siku yang sudah ada dalam kode asli.

Terkadang spasi di antara dua token tidak dapat dihapus tanpa mengubah maknanya. return a tidak dapat diubah menjadi returna karena akan terbaca sebagai satu kata. Hal yang sama berlaku untuk nama yang ditulis menggunakan huruf di luar alfabet Inggris, sehingga typeof π tetap mempertahankan spasinya. Jika penghapusan spasi akan menggabungkan dua token, alat ini mempertahankan satu spasi.

Jeda baris juga dapat berpengaruh. JavaScript terkadang menyisipkan titik koma secara otomatis di akhir baris, berdasarkan aturan yang disebut Automatic Semicolon Insertion. Jika penghapusan jeda baris dapat memicu atau menghalangi aturan tersebut, atau jika jeda baris muncul setelah kurung kurawal penutup }, alat ini mempertahankan satu baris baru di sana. Karena itu, kode yang diminifikasi tidak selalu dipadatkan menjadi satu baris: beberapa jeda baris mengubah makna kode dan harus dipertahankan.

Cara menggunakan minifier JavaScript ini

  1. Tempelkan kode JavaScript ke kotak input.
  2. Pilih "Minify".
  3. Baca hasilnya di kotak output, bersama ukuran asli, ukuran setelah minifikasi, dan persentase pengurangannya.
  4. Pilih "Copy" untuk menyalin kode yang telah diminifikasi.

Minifikasi berjalan di dalam tab browser, sehingga kode tidak diunggah ke mana pun untuk diproses. Alat ini juga menyalin kode yang ditempelkan ke alamat halaman, sehingga hasilnya mudah ditandai atau dibagikan. Karena itu, siapa pun yang dapat melihat alamat tersebut juga dapat melihat kodenya.

Contoh: meminifikasi fungsi

Sebelum:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Sesudah:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Ketiga komentar hilang dan indentasi dihapus. Titik koma setelah a+b tetap ada karena alat ini tidak pernah menghapus titik koma yang sudah ada. Jeda baris sebelum const juga tetap ada karena muncul setelah } penutup.

Contoh: meminifikasi kelas

Sebelum:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Sesudah:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Perhatikan bahwa jeda baris tetap ada sebelum setiap metode dan sebelum } penutup kelas. Setiap jeda tersebut muncul setelah } penutup dalam kode asli, sehingga aturan yang melindungi Automatic Semicolon Insertion mempertahankannya. Titik koma di dalam setiap metode juga tetap ada.

Rumus pengurangan ukuran

Alat ini menampilkan tiga angka di bawah kotak output: ukuran asli, ukuran setelah minifikasi, dan pengurangannya. Semua ukuran merupakan jumlah karakter, bukan byte. Pengurangan tersebut berupa persentase yang dibulatkan ke bilangan bulat terdekat:

1reduction = round((1 - minified characters / original characters) x 100)
2

Contoh fungsi di atas memiliki 213 karakter sebelum diminifikasi dan 103 sesudahnya. Jadi, 1–103 / 213 = 0,5164, yaitu 51,64%, dan alat ini menampilkan 52%. Contoh kelas berkurang dari 515 karakter menjadi 304, yaitu 40,97%, yang ditampilkan sebagai 41%.

Batasan minifier ini

Alat ini hanya menghapus komentar dan spasi. Tidak seperti alat dalam tahap build, seperti Terser atau UglifyJS, alat ini tidak mengganti nama variabel, menghapus kode yang tidak digunakan, atau menggabungkan berkas. Alat-alat tersebut biasanya menghasilkan keluaran yang lebih kecil, tetapi memerlukan proses build untuk dijalankan. Alat ini bekerja seketika di browser tanpa penyiapan, sehingga lebih cocok untuk pemeriksaan cepat atau cuplikan kecil daripada pipeline produksi lengkap.

Pertanyaan yang sering diajukan

Apa yang dihapus oleh minifier JavaScript?

Alat ini menghapus komentar dan spasi kosong yang tidak diperlukan agar kode dapat berjalan. Alat ini tidak menghapus titik koma, tanda kurung, atau karakter lain apa pun yang sudah menjadi bagian dari kode.

Apakah minifikasi JavaScript mengubah cara kode berjalan?

Tidak. Kode yang telah diminifikasi seharusnya menghasilkan hasil yang sama seperti kode asli. Hanya pemformatannya yang berubah.

Mengapa kode yang telah diminifikasi terkadang masih memiliki jeda baris?

Jeda baris dapat diwajibkan oleh aturan Automatic Semicolon Insertion JavaScript, atau dapat muncul setelah kurung kurawal penutup }. Menghapusnya dapat mengubah perilaku kode, sehingga alat ini mempertahankan satu baris baru di tempat tersebut alih-alih menghapusnya.

Apakah minifikasi sama dengan kompresi?

Tidak. Minifikasi menghapus karakter dari kode sumber itu sendiri. Kompresi, seperti gzip atau Brotli, menyandikan berkas dengan cara berbeda untuk dikirim melalui jaringan. Situs web biasanya menggunakan keduanya secara bersamaan.

Apakah kode saya dikirim ke server?

Minifier itu sendiri berjalan sepenuhnya di tab browser, dan kode tidak diunggah untuk diminifikasi. Kode yang ditempelkan disimpan di alamat halaman agar hasilnya dapat dibagikan atau ditandai, sehingga kode tersebut muncul di bilah alamat browser dan riwayatnya.

Dapatkah kode yang telah diminifikasi dikembalikan ke bentuk aslinya?

Spasi kosong dapat dipulihkan oleh pemformat kode, tetapi komentar serta nama variabel dan fungsi asli telah hilang, kecuali jika peta sumber terpisah disimpan sebelumnya.

Referensi

  1. MDN Web Docs. "Minification." Glosarium MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," bagian 12,10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," bagian 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," bagian 22.2.6, "Properties of the RegExp Prototype Object" (kumpulan flag d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object