Minification — What It Is, Principles and Tools for Code Minification

What is Minification?

Minification is an automatic transformation of source code that removes all characters that do not affect program execution. Spaces, tabs, newline characters, comments, and redundant parentheses are removed or shortened. Minification is applied to JavaScript, CSS, HTML, and, less frequently, JSON configurations before deployment to production.

The main goal of minification is to reduce the size of files transmitted over the network. A 300 KB JavaScript file after minification can take up 120–150 KB, which reduces loading time by 200–400 ms on a slow 3G connection. Google PageSpeed Insights and Lighthouse directly recommend minifying code: it is one of the criteria for performance evaluation and Core Web Vitals.

Minification is an integral part of the build pipeline. After transpilation with TypeScript or Babel, the code goes through Tree Shaking (removing unused functions), then through a minifier, and only then is assembled into the final bundle. In modern bundlers (Webpack, Rollup, esbuild), minification is performed by plugins at the final build stage.

What Minification Removes

How Minification Works: Main Techniques

Removing spaces and line breaks is the simplest and most obvious technique. The minifier parser traverses the AST (Abstract Syntax Tree) and removes all whitespace characters that are not part of string literals. Most minifiers additionally combine operators into a single line, which provides additional savings when compressing with GZip or Brotli.

Variable name replacement (mangling) is a more aggressive technique. Local variables and function parameters are renamed to single-letter identifiers: a, b, c. This reduces size by an additional 15–30%. Terser and esbuild support mangling with the option to preserve certain names (e.g., public API via mangle.props.reserved).

Dead Code Elimination

Dead code elimination (DCE) removes code branches that never execute. The minifier analyzes conditions that are always false (if (false)) and removes the corresponding blocks. More advanced analysis is performed at the Tree Shaking stage before minification, but DCE at the minifier level catches local cases of dead code not detected at the module level.

Variable Name Mangling

Mangling renames local variables and function parameters to short identifiers (one or two letters). Terser performs mangling based on scope: variables within a single function get unique short names that do not conflict with outer scopes. The mangle.reserved option allows preserving certain names — for example, public library APIs.

Mangling does not affect global variables, object properties (unless mangle.props is enabled), or class names used with new. To protect a library’s public API from mangling, use mangle.props.reserved with regular expressions: reserved: [“_prop”, /^private_/]. Without this setting, mangling can break a library if external code accesses object properties by name.

Example: Before and After Minification

// Source code
function calculateTotal(price, tax) {
    var result = price + (price * tax);
    // Return the total sum
    return result;
}

var total = calculateTotal(100, 0.2);
console.log(total);

// After Terser minification
function calculateTotal(a, b){return a + a * b}
var c = calculateTotal(100, .2);
console.log(c);

In the second example, Terser removed comments, spaces, and line breaks, renamed price to a, tax to b, result to c. The size decreased from 197 characters to 79 — a saving of 60%. At the same time, the code functionality is fully preserved: calculateTotal(100, 0.2) returns 120.

Minification Tools: Terser, esbuild, UglifyJS

Terser is the standard JavaScript minifier in the Webpack ecosystem and most modern bundlers. Terser supports ES6+ syntax (arrow functions, async/await, spread), mangling with public API protection, source maps, and parallel execution using CPU count. Since version 5.16, Terser includes TypeScript optimizations — removing type-only imports and interfaces.

esbuild is a minifier written in Go, embedded in the eponymous bundler. esbuild performs minification 10–100 times faster than Terser due to native code and parallel processing. However, esbuild supports fewer optimizations: it does not perform mangling with property preservation, does not remove type-only imports, and optimizes expressions less aggressively.

Terser Configuration in Webpack

// webpack.config.js — TerserPlugin configuration
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
            dead_code: true,
          },
          mangle: {
            reserved: ["React", "Component"],
          },
          output: {
            comments: false,
          },
        },
        parallel: true,
      }),
    ],
  },
};

The TerserPlugin configuration includes three key blocks. compress handles expression optimization: drop_console removes console.log, drop_debugger removes debugger, dead_code removes unreachable branches. mangle controls variable renaming with reserved to protect public names. parallel enables multithreading with CPU count.

CSS Minification with esbuild

// esbuild: CLI command for JS and CSS minification
// esbuild app.js --bundle --minify --outfile=dist/app.min.js
// esbuild app.css --bundle --minify --outfile=dist/app.min.css

const esbuild = require("esbuild");

esbuild.build({
  entryPoints: ["src/app.js", "src/styles.css"],
  bundle: true,
  minify: true,
  sourcemap: true,
  target: ["es2015"],
  outdir: "dist",
}).catch(() => process.exit(1));

The esbuild API accepts one-liner configuration. minify: true enables minification of both JS and CSS. sourcemap: true generates code maps for debugging. target defines the minimum ES level — esbuild automatically transpiles modern code for the selected version. esbuild is especially effective for projects where build time is critical: CI/CD pipelines, Hot Module Replacement, and rapid prototypes.

Minification in React Native and WebView

React Native uses Metro Bundler — its own bundler that includes Terser-based minification. In production mode, Metro automatically applies minification to the application’s JavaScript bundle. Minification configuration in Metro is set through metro.config.js in the transformer.minifierConfig section. Additionally, inline-require can be disabled to reduce bundle size on iOS.

WebView in mobile applications also benefits from minification. HTML, CSS, and JS loaded in WebView should be minified before being embedded in the application or loaded from the server. For local resources (Assets), minification is especially important — APK/IPA size directly affects installation conversion in app stores.

Hermes and Minification

Hermes is a JavaScript engine for React Native developed by Facebook. Hermes performs Ahead-of-Time (AOT) bytecode compilation, which reduces application startup time by 30–50%. For Hermes, JavaScript bundle minification is performed before bytecode compilation using Terser. Hermes supports its own HBC (Hermes Bytecode) format, but the JS minification stage remains necessary.

Metro Configuration for React Native

// metro.config.js — minification configuration
const defaultConfig = require("metro-config/src/defaults");

module.exports = require("metro-config").mergeConfig(
  defaultConfig,
  {
    transformer: {
      minifierConfig: {
        compress: {
          drop_console: true,
        },
        mangle: {
          safari10: true,
        },
      },
    },
  }
);

Metro with minifierConfig.drop_console removes all console.log from the React Native production bundle. The mangle.safari10 parameter prevents renaming identifiers that break Safari 10 (iOS 10). This is especially important for applications supporting older iPad and iPhone 5s devices with iOS 10/11.

How Minification Differs from Compression

Minification and compression (gzip, brotli) are different optimization stages. Minification works at the source code level and reduces the number of characters before sending to the server. Compression works at the transport protocol level and is applied by the server (nginx, Apache, CDN) when transmitting the file to the client. Minification reduces size before compression, which gives a double effect: gzip compresses already reduced data.

A 300 KB JavaScript file after minification — 120 KB, after gzip — 35–40 KB. If only gzip is applied to the non-minified file, the size will be 55–70 KB. Minification + gzip gives a 30–40% better result than gzip alone. Brotli (level 6) compresses an additional 15–20% more efficiently than gzip after minification.