Glossary

Minification

Definition: Minification removes unnecessary characters (whitespace, comments, long variable names) from source code to reduce file size and improve load time.

Minification is the process of removing all unnecessary characters from source code — whitespace, newlines, comments, long variable names — without changing its functionality. The output is functionally identical but significantly smaller, resulting in faster download times.

What Gets Removed

  • Whitespace and indentation.
  • Code comments.
  • Newline characters.
  • Shortened variable names (in JavaScript — this is called mangling).

Before and After Example (CSS)

/* Before */
.button {
    background-color: #6366f1;
    padding: 8px 16px;
    border-radius: 6px;
}

/* After */
.button{background-color:#6366f1;padding:8px 16px;border-radius:6px}

Minification Tools

  • CSS — cssnano, CleanCSS.
  • JavaScript — Terser, UglifyJS, esbuild.
  • HTML — HTMLMinifier.
  • Build tools — Webpack, Vite, Parcel automatically minify in production builds.

Minification vs Compression

  • Minification — Permanently removes characters. Applied at build time.
  • Compression (Gzip/Brotli) — Reduces transfer size at the network level. Applied at serve time.
  • Use both together for maximum benefit.
Free Tools