Skip to main content

What does minification do?

Frontend ToolsJunior~1 min read
Suggest an edit

Minification is the process of compressing JavaScript, CSS, and HTML files by removing everything not needed for execution, in order to reduce their size.

What a minifier does:

  1. Removes whitespace, line breaks, and tabs

Before:

js
function sum(a, b) { return a + b; }

After:

js
function sum(a,b){return a+b;}
  1. Renames variables and functions

Long names get shortened to a, b, c, and so on. 3. Removes comments 4. Inlines and optimizes expressions

Merges statements, removes unnecessary constructs. 5. Sometimes: removes "dead" code

(if a production build and tree shaking are enabled)

Result:

  • file size shrinks by 30-90%
  • the code becomes unreadable, but works the same
  • it loads faster and parses faster

Examples of minifiers:

  • Terser (for JS)
  • esbuild, SWC (newer generation)
  • csso, clean-css (for CSS)
  • html-minifier (for HTML)

Conclusion: Minification is a way to compress code to its limit so it's as small as possible and reaches the user faster.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit