Suggest an editImprove this articleRefine the answer for “Code minification”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Minification is the removal from source code (JS, CSS, HTML) of everything that does not affect how the program runs but does add to file size: whitespace, line breaks, comments, long variable names, redundant semicolons and brackets.** After minification the code is still correct, but as compact as possible, so the browser downloads, parses and executes it faster. A typical JS bundle loses 50 to 70 percent of its weight, and together with gzip or brotli the saving is bigger still. Less weight means lower network latency, faster parsing, better FCP and LCP metrics, less load on the server and CDN, and less battery drain on mobile. Modern bundlers (Webpack, Vite, Rollup, Parcel, Next.js) turn minification on automatically in a production build, along with tree-shaking. ```javascript // before: ~90 bytes function sum(a, b) { // add two numbers return a + b; } console.log(sum(2, 3)); // after: ~45 bytes function sum(n,o){return n+o}console.log(sum(2,3)); ``` **Key point:** minification shrinks files without changing behaviour, and it is the cheapest load-speed optimisation because it is a single bundler option.Shown above the full answer for quick recall.Answer (EN)Image**Minification is the process of removing from source code everything that is unnecessary: it does not affect how the program runs, but it does increase file size.** After minification the code stays correct, it just becomes as compact as possible, so the browser receives it faster. ## Theory ### TL;DR - Minification strips whitespace, line breaks and comments, and shortens local variable names. - The behaviour of the code is unchanged, only its weight is. - Typical saving: 50 to 70 percent of bundle size, and more once gzip or brotli is applied. - A smaller file means a faster network, faster parsing and better FCP and LCP. - It applies to JS, CSS, HTML, and often to JSON and SVG as well. - Minification is not obfuscation: the first optimises size, the second hides logic. - Every modern bundler does it automatically in production mode. ### Quick example ```javascript // before minification function sum(a, b) { // add two numbers return a + b; } console.log(sum(2, 3)); ``` ```javascript // after minification function sum(n,o){return n+o}console.log(sum(2,3)); ``` It was about 90 bytes and became about 45 bytes, so minus 50 percent of the size. And after gzip or brotli compression on the server the saving is bigger still. ### What exactly gets removed | What is removed | Example | | --- | --- | | Spaces and tabs | `function test () { ... }` becomes `function test(){...}` | | Line breaks | `\n` characters are dropped | | Comments | `/* description */` is dropped | | Long variable names | `let counter = 0;` becomes `let a=0;` | | Unused code (dead code) | removed via tree-shaking | | Redundant semicolons and brackets | optimised away | One important detail: only local names that are invisible from the outside get shortened. Public APIs, object property names and string keys are left alone by default, because renaming them would break the code. ### How this affects speed While loading a page the browser has to: 1. Download the JS, CSS and HTML files. 2. Parse them, execute them and paint the page. The smaller the files, the: - faster the network response (latency); - faster the parsing and execution; - lower the time to first render (FCP, LCP); - lighter the load on the server and CDN. Minification helps at both stages: fewer bytes travel over the network and the JavaScript parser has fewer characters to work through. ### Benefits, and where it is used | Benefit | What it gives | | --- | --- | | Faster loading | Less data, so a faster page | | Less traffic | Savings on bandwidth and CDN bills | | Faster on mobile | Lower battery and CPU usage | | Better SEO | Search engines take site speed into account | | Code is harder to read | Slightly raises the bar, but it is not obfuscation | Minification is applied to: - JavaScript (`.js`); - CSS (`.css`); - HTML (`.html`); - JSON and SVG (often automatically); - sometimes even to inline scripts and styles in the markup. ### Minification versus obfuscation | Property | Minification | Obfuscation | | --- | --- | --- | | Goal | Reduce size | Hide the code logic | | Affects performance | Yes, it speeds things up | No, it often slows things down | | Readability | Becomes less readable | Nearly impossible to understand | | Example tools | Terser, UglifyJS, csso | javascript-obfuscator | Minification is an optimisation, obfuscation is a protection measure. Obfuscated code usually ends up larger and slower, because extra transformations are added on purpose. ### Tools and build configuration | Language | Popular tools | | --- | --- | | **JS** | Terser (`github.com/terser/terser`), UglifyJS, SWC, esbuild | | **CSS** | cssnano, CleanCSS, csso | | **HTML** | html-minifier, posthtml-minifier | | **Bundlers** | Webpack, Vite, Rollup, Parcel, they do it automatically when `NODE_ENV=production` | An example for Webpack: ```javascript // webpack.config.js optimization: { minimize: true, minimizer: [ new TerserPlugin(), new CssMinimizerPlugin(), ], } ``` In Next.js, React, Vite and other modern bundlers minification is enabled by default in the production build: ```javascript npm run build ``` The bundler automatically minifies JS and CSS, removes unused code through tree-shaking, and gzip or brotli compression is normally added by the hosting or CDN at deploy time. A realistic gain looks roughly like this: | File type | Before minification | After minification | Saving | | --- | --- | --- | --- | | JS bundle | 1.2 MB | 340 KB | -72% | | CSS bundle | 280 KB | 85 KB | -70% | | HTML | 45 KB | 30 KB | -33% | On a poor mobile connection that saves one or two seconds of loading. ### Common mistakes - **Confusing minification with code protection.** Minified code is trivially restored to a readable form by any beautifier, so secrets and keys in the bundle are only nominally secret. - **Not shipping source maps.** Without them production stack traces collapse into `a is not a function` on line 1, and debugging becomes almost impossible. - **Relying on function names at runtime.** After minification `fn.name` and `constructor.name` change, so any logic built on them breaks. - **Minifying an already minified file.** A second pass gains nothing and can occasionally corrupt the output or strip licence comments. - **Expecting minification to replace compression.** gzip and brotli give a separate large win and still have to be enabled on the server. - **Forgetting dead code inside libraries.** Tree-shaking only works with ES modules, a CommonJS import pulls the whole package into the bundle.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.