Code minification: what it is and why it matters

What is code minification

Minification is the process of removing anything from source code that is not needed for it to run: whitespace, line breaks, comments, and long variable names (optionally). The code's functionality does not change.

Minification reduces file size by 20-60%, speeding up delivery over the network.

What minification removes

From CSS:

• Whitespace and indentation
• Line breaks
• Comments
• Duplicate properties

From JavaScript:

• Whitespace and indentation
• Line breaks
• Comments
• Optionally: shortening variable names (obfuscation)

From HTML:

• Whitespace between tags
• HTML comments
• Empty attributes

CSS minification example

Before minification (1,250 bytes):

/* Стили для карточки товара */
.product-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

After minification (250 bytes):

.product-card{display:flex;flex-direction:column;padding:16px;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1)}.product-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.15)}

JavaScript minification example

Before:

// Функция для форматирования цены
function formatPrice(price, currency) {
  const formatter = new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: currency || 'RUB'
  });
  return formatter.format(price);
}

After:

function formatPrice(e,n){return new Intl.NumberFormat("ru-RU",{style:"currency",currency:n||"RUB"}).format(e)}

Minification tools

JavaScript

• Terser — the most popular, used in Webpack and Rollup
• esbuild — very fast (Go), used in Vite
• UglifyJS — a classic tool

CSS

• cssnano — a PostCSS plugin
• clean-css — a Node.js tool
• lightningcss — fast (Rust)

HTML

• html-minifier-terser — Node.js
• minify — a Go tool

Next.js minification

Next.js automatically minifies JS and CSS in production builds:

// next.config.js — отключить минификацию (не рекомендуется)
module.exports = {
  swcMinify: true, // включено по умолчанию (использует SWC)
}

Minification vs. compression

Minification and Gzip/Brotli compression are different techniques that complement each other:

• Minification removes unnecessary characters → smaller file size on disk
• Gzip compresses data for network transmission → less data in the HTTP response

Use both approaches together for the best results.

Online code minification on reChecker

Use Code Minifier to quickly minify HTML, CSS, and JavaScript online. The tool:

• Minifies code in the browser without sending it to a server
• Shows the compression ratio
• Supports copying the result

FAQ

Can minified code be edited? No, it is unreadable to humans. Always keep the source code and minify it automatically during the build. Source Maps let you debug minified code in DevTools.

Should HTML be minified? HTML minification has less impact than JS/CSS minification because HTML is often dynamic. HTML minification is useful for static sites, but is a lower priority for SSR—gzip/brotli compression has a greater impact.

Are obfuscation and minification the same thing? No. Minification only removes unnecessary content. Obfuscation additionally renames variables/functions to make code harder to read. Obfuscation makes reverse engineering more difficult, but is not protection.