Apakah minifikasi bisa merusak kode?

Terser bersikap konservatif secara default dan menjaga semantik. mangle hanya mengganti nama variabel yang tidak diekspor, compress melewatkan transformasi yang tidak dapat dibuktikan aman. Kalau kode bergantung pada Function.name atau eval pada sumbernya, matikan mangle untuk berkas itu.

Berapa biasanya ukuran yang bisa dipangkas?

JavaScript biasanya mengecil 40 sampai 70%. Kode dengan komentar panjang, nama bertele-tele, atau cabang yang tidak terpakai mengecil lebih banyak. Kode yang sudah ringkas atau berisi banyak literal string mengecil lebih sedikit. Setelah gzip, selisih makin tipis.

Apa beda minify, compress, dan mangle?

Minify adalah istilah umum. Compress melakukan transformasi pada level kode seperti melipat konstanta dan menghapus cabang mati. Mangle mengganti pengenal jadi nama pendek. Masing-masing bisa dijalankan sendiri, tapi gabungan ketiganya biasanya menghasilkan keluaran terkecil.

Apakah masih perlu minify kalau server pakai gzip atau brotli?

Perlu. Gzip mengurangi redundansi teks, tapi tidak mengganti nama variabel panjang dan tidak menghapus cabang mati. Kode yang sudah diminify tetap lebih kecil setelah gzip, dan diproses lebih cepat saat dimuat. Dua tahap ini saling menambah, bukan saling menggantikan.

Apakah ini bekerja untuk TypeScript atau sintaks modern ES2022?

TypeScript murni harus dikompilasi dahulu karena Terser hanya menerima JavaScript. Sintaks modern hingga ES2022 (private field, top-level await, optional chaining) dibaca langsung tanpa perlu transformasi Babel.

Minifier JS

Minifikasi kode JavaScript untuk memperkecil ukuran file

Ukuran asli

// Utility library — helper functions
(function () {
  "use strict";

/**
   * Debounce a function call.
   * @param {Function} fn - The function to debounce
   * @param {number} delay - Delay in milliseconds
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

// Format a number with commas
  function formatNumber(num) {
    return num.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g,
      ","
    );
  }

// Deep clone an object
  function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
      return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepClone(obj[key]);
      }
    }
    return copy;
  }

console.log("Utilities loaded");

window.Utils = {
    debounce: debounce,
    formatNumber: formatNumber,
    deepClone: deepClone,
  };
})();

// Utility library — helper functions
(function () {
  "use strict";

  /**
   * Debounce a function call.
   * @param {Function} fn - The function to debounce
   * @param {number} delay - Delay in milliseconds
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

  // Format a number with commas
  function formatNumber(num) {
    return num.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g,
      ","
    );
  }

  // Deep clone an object
  function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
      return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepClone(obj[key]);
      }
    }
    return copy;
  }

  console.log("Utilities loaded");

  window.Utils = {
    debounce: debounce,
    formatNumber: formatNumber,
    deepClone: deepClone,
  };
})();

Pengaturan

ContohVersi Target

Samarkan variabelKompresHapus console.logPertahankan nama kelasPertahankan nama fungsi

Ctrl+Enter untuk minify

Apa itu Minifier JS?

JS Minifier memampatkan kode JavaScript dengan menghapus whitespace, komentar, dan mempersingkat nama variabel menggunakan mesin Terser. Ini mengurangi ukuran file untuk pemuatan halaman yang lebih cepat dan biaya bandwidth lebih rendah, sambil tetap mempertahankan fungsionalitas kode sepenuhnya.

Minifier menjalankan Terser secara lokal pada kode Anda: menghapus spasi dan komentar, mengganti nama variabel lokal jadi satu huruf saat mangle aktif, menerapkan transformasi AST aman saat compress aktif, dan dapat membuang panggilan console.log. Alat menampilkan ukuran asli, ukuran setelah dipadatkan, serta persentase penghematan supaya manfaatnya jelas sebelum dirilis.

Cara menggunakan

Tempel kode JavaScript Anda ke editor input, atau unggah file .js.
Pilih opsi minifikasi: toggle mangling (pemendekan nama variabel), kompresi, dan penghapusan pemanggilan console.log.
Klik Minify untuk memproses kode. Periksa persentase pengurangan ukuran, lalu unduh file yang diminifikasi atau salin ke clipboard.

Kapan menggunakan

Memadatkan bundel JavaScript sebelum diunggah ke CDN yang tidak punya tahap build.
Membersihkan komentar dan pernyataan console dari pustaka sebelum ditempel ke tema CMS.
Membuat versi minified sekali pakai untuk widget chat, pixel iklan, atau skrip pihak ketiga.

Hasil

Anda memiliki pustaka utilitas 45KB dengan banyak komentar dan nama variabel panjang. Tempelkan, aktifkan mangling dan kompresi, dan dapatkan output 12KB — pengurangan 73% siap untuk deployment produksi.

FAQ

Apakah minifikasi bisa merusak kode?: Terser bersikap konservatif secara default dan menjaga semantik. mangle hanya mengganti nama variabel yang tidak diekspor, compress melewatkan transformasi yang tidak dapat dibuktikan aman. Kalau kode bergantung pada Function.name atau eval pada sumbernya, matikan mangle untuk berkas itu.
Berapa biasanya ukuran yang bisa dipangkas?: JavaScript biasanya mengecil 40 sampai 70%. Kode dengan komentar panjang, nama bertele-tele, atau cabang yang tidak terpakai mengecil lebih banyak. Kode yang sudah ringkas atau berisi banyak literal string mengecil lebih sedikit. Setelah gzip, selisih makin tipis.
Apa beda minify, compress, dan mangle?: Minify adalah istilah umum. Compress melakukan transformasi pada level kode seperti melipat konstanta dan menghapus cabang mati. Mangle mengganti pengenal jadi nama pendek. Masing-masing bisa dijalankan sendiri, tapi gabungan ketiganya biasanya menghasilkan keluaran terkecil.
Apakah masih perlu minify kalau server pakai gzip atau brotli?: Perlu. Gzip mengurangi redundansi teks, tapi tidak mengganti nama variabel panjang dan tidak menghapus cabang mati. Kode yang sudah diminify tetap lebih kecil setelah gzip, dan diproses lebih cepat saat dimuat. Dua tahap ini saling menambah, bukan saling menggantikan.
Apakah ini bekerja untuk TypeScript atau sintaks modern ES2022?: TypeScript murni harus dikompilasi dahulu karena Terser hanya menerima JavaScript. Sintaks modern hingga ES2022 (private field, top-level await, optional chaining) dibaca langsung tanpa perlu transformasi Babel.

Minifier JS

Ukuran asli

Pengaturan

Apa itu Minifier JS?

Cara menggunakan

Kapan menggunakan

Hasil

FAQ

Alat terkait

Generator Data Terstruktur

Halaman Web ke PDF

Generator Kebijakan Privasi

Generator Syarat Layanan

Generator Persetujuan Cookie

Minifikasi CSS

Minifier JS

Ukuran asli

Pengaturan