๐Ÿ‹
Menu
Web

Minification

Minifikasi (Pengurangan Ukuran Kode)

Proses menghapus karakter yang tidak diperlukan dari kode sumber (spasi, baris baru, komentar, format) tanpa mengubah fungsionalitasnya, menghasilkan file yang lebih kecil yang dimuat lebih cepat.

Detail Teknis

Teknik minifikasi: penghapusan spasi (spasi, tab, baris baru), penghapusan komentar, pemendekan nama variabel (mangling: backgroundColor โ†’ a), dead code elimination (tree shaking), penggabungan pernyataan, optimasi literal (true โ†’ !0), inlining fungsi. Minifier JavaScript: Terser (penerus UglifyJS, mendukung ES6+), esbuild (berbasis Go, 10-100ร— lebih cepat), SWC (berbasis Rust). Minifier CSS: cssnano (berbasis PostCSS), Lightning CSS (berbasis Rust), clean-css. Minifier HTML: html-minifier-terser. Penghematan ukuran tipikal: JS 40-60%, CSS 20-40%, HTML 10-20% (sebelum gzip). Kompresi lanjutan (gzip/brotli) diterapkan setelah minifikasi untuk pengurangan lebih lanjut. Source map (.map) memetakan kode yang diminifikasi kembali ke sumber asli untuk debugging.

Contoh

```javascript
// Simple CSS minifier
function minifyCSS(css) {
  return css
    .replace(/\/\*[\s\S]*?\*\//g, '')  // remove comments
    .replace(/\s+/g, ' ')                // collapse whitespace
    .replace(/\s*([{};:,])\s*/g, '$1')   // remove around symbols
    .trim();
}
// 1024 bytes โ†’ 612 bytes (40% reduction)
```

Alat Terkait

Istilah Terkait