Code Minifier — Minify JavaScript, CSS, and HTML

How to Minify Code

1. Open the code minifier.
2. Select the code type: JavaScript, CSS, or HTML.
3. Paste your code into the input panel.
4. Click Minify. The minified output appears in the right panel.
5. The tool shows the original size, minified size, and percentage reduction.
6. Copy the minified output. Use this in your production build in place of the original file.

Minification Techniques

File Size Impact of Minification

Why Minification Matters for Performance

Page load speed is directly linked to file size — every byte must be downloaded before it can be executed. Key impacts:

• Faster Time to Interactive (TTI): JavaScript must be downloaded, parsed, and executed. Smaller JS bundles reduce all three phases.
• Better Core Web Vitals: Google's LCP (Largest Contentful Paint) and FID (First Input Delay) / INP (Interaction to Next Paint) are affected by JS bundle size. Heavy unminified JS delays these metrics.
• Lower data costs for users: On mobile connections (3G, 4G in poor coverage), 1 MB vs. 200 KB makes a tangible difference, especially in developing markets.
• CDN costs: Hosting providers charge for bandwidth. Smaller files = lower serving costs at scale.
• Caching efficiency: Smaller files are more likely to stay in browser cache (caches have size limits); smaller diffs between versions mean better incremental caching.

Minification vs. Compression (Gzip/Brotli)

Minification and compression (gzip or Brotli) are complementary — both should be applied:

• Minification reduces the source code size by removing unnecessary characters before transmission.
• Compression (gzip/Brotli) further compresses the minified file for transmission over the network. The server decompresses before sending, or the browser decompresses after receiving — most modern web servers serve gzip/Brotli automatically.

Minification complements compression because repeated patterns in minified code (short variable names, consistent structure) compress better than varied whitespace and comments. Minify first, then let your web server apply gzip on top — you typically get 60–80% total reduction from unminified to minified-and-compressed.

Minification in Build Pipelines

For production projects, minification is typically handled automatically by build tools:

• Vite: Uses esbuild for minification by default in production builds. Terser available as an option for more aggressive minification.
• Webpack: Uses TerserPlugin (JS) and CssMinimizerPlugin (CSS) by default in production mode.
• Parcel: Automatic minification in production builds — no configuration needed.
• Rollup: Integrates with @rollup/plugin-terser for JS minification.
• Create React App / Next.js: Both minify by default in production builds (npm run build / next build).

The online code minifier is useful for one-off files, testing minification output, understanding what minification does, or for projects without a build pipeline.

Source Maps: Debugging Minified Code

Minified code is unreadable — variable names are single characters, all on one line. Source maps solve the debugging problem: they are separate files (.map) that map the minified output back to the original source code. When your browser devtools encounter an error in minified production code, they use the source map to show you the original file and line number.

Source maps should be generated by your build tool but not served to end users (they reveal your source code). Options:

• Generate source maps and upload them to your error monitoring service (Sentry, Datadog) — errors are de-obfuscated in the monitoring tool without serving maps publicly
• Serve source maps only to internal IPs or behind authentication
• Use hidden source maps (reference in the file but restrict server access to .map files)

Common Minification Pitfalls

• Breaking template literals: Whitespace inside template literal strings (backtick strings in JS) matters — minifiers must preserve it. Most modern minifiers handle this correctly.
• Mangling public API names: If your JS file exports functions or is a library, do not mangle (rename) public-facing function and property names — callers will break. Use an export list or configure your minifier to preserve specific names.
• CSS vendor prefixes: Some minifiers may remove vendor-prefixed properties that appear to have standard equivalents — check that browser-specific prefixes needed for your target browsers are preserved.
• Minifying source maps by accident: Minify the source file, not the source map file.
• Minifying already-minified code: Running minification on already-minified code adds no benefit and may introduce issues. Minify once, keep the original.

Common Questions

Does minification change what the code does?

Correct minification should not change the code's behaviour. The output is functionally identical — it produces the same results for all valid inputs. The only differences are: variable names (mangled to shorter forms within local scope), formatting (no whitespace/newlines), and comments (removed). If minified code behaves differently from the original, it indicates a bug in the minifier or a code pattern the minifier does not handle correctly (rare, but more common with aggressive optimisations like dead code elimination).

Should I commit minified code to version control?

Generally no. Minified code creates very large, unreadable diffs that make code review impossible. The conventional approach: commit unminified source code, and produce minified output as part of the build process (e.g., npm run build). The build output (/dist, /build) is typically added to .gitignore. For deployed static sites or libraries where you publish to npm/CDN, the minified file is included in the published package but not necessarily in the repository.

What is the difference between minification and obfuscation?

Minification optimises for smaller file size — it makes code unreadable as a side effect, but that is not the goal. Obfuscation deliberately makes code difficult to understand and reverse-engineer — through variable name randomisation, control flow flattening, string encryption, and other anti-analysis techniques. Obfuscated code is harder to decompile but often larger and slower than minified code. Minification is standard web practice; obfuscation is niche (mainly for commercial software protection). Neither provides true security — determined developers can reverse engineer either.