Cach nen ma web: CSS, JavaScript va HTML
Hoc cach nen CSS, JS va HTML. Giam kich thuoc, tang toc do tai.
What is minification and why it matters
Minify removes unnecessary characters from source code without changing functionality: whitespace, line breaks, comments, and optionally renames variables.
Real impact: 50KB CSS → ~35KB (-30%). 200KB JS → ~120KB (-40%). Google uses Core Web Vitals for ranking. Amazon estimated 100ms latency costs 1% of sales.
Minify instantly with the NexTools code minifier.
How to use the NexTools minifier
The NexTools minifier: paste code, select type (CSS/JS/HTML), click "Minify", copy result. Shows reduction percentage and before/after size. All in browser.
To prettify minified code, the NexTools JSON formatter helps with JSON.
Minifying CSS: what gets removed and what doesn't
Removed: Whitespace, comments, trailing semicolons, unnecessary zeros (0.5px→.5px), units on zero (0px→0).
NOT removed: Selectors, property values, quoted strings.
Tools: cssnano, clean-css. With Tailwind/CSS Modules, minification is automatic.
Minifying JavaScript: from whitespace to tree shaking
Level 1: Whitespace removal (-20-30%).
Level 2: Mangling — rename variables to short names (-10-20% more).
Level 3: Dead code elimination — remove unreachable code.
Level 4: Tree shaking — remove unused module exports. Webpack, Rollup, esbuild do this automatically.
Tools: Terser (standard), esbuild (100x faster), SWC (Rust-based).
Warning: Aggressive minification can break code using Function.name or eval.
Minification vs compression (gzip/brotli): they complement each other
| Technique | What it does | Typical reduction | When applied |
|---|---|---|---|
| Minification | Removes unnecessary characters | 20-40% | Build time |
| Gzip | Binary compression | 60-80% | Server serving |
| Brotli | Improved compression | 70-85% | Server serving |
Real example: 200KB JS → minified 120KB → gzip 35KB → brotli 28KB. Total: 86% reduction.
For image compression, use the NexTools image compressor.
Automatic minification in build pipelines
Next.js: Auto-minifies JS/CSS with SWC in next build.
Vite: esbuild (JS) + Lightning CSS in vite build.
Webpack: TerserPlugin for JS, CssMinimizerPlugin for CSS.
Manual: npx terser input.js -o output.min.js -c -m
Source maps: debugging minified code
Minified code is unreadable. Source maps (.map) connect minified to original for debugging.
In production: Don't serve public source maps (exposes source). Use private maps in Sentry/Datadog only.
Measuring: how to know if minification helped
Before/after: Compare file sizes in Network panel.
Lighthouse: Shows "Minify CSS/JavaScript" suggestions.
Core Web Vitals: LCP improves with smaller files.
Verify JSON configs are still valid with the NexTools JSON validator.
Thử công cụ này:
Mở công cụ→Câu hỏi thường gặp
Can minification break my code
Rarely. JS mangling can break code using Function.name or eval. CSS/HTML minification almost never causes issues. Always test after minifying.
Should I minify in development or only production
Only production. Minified code is unreadable. Build tools auto-minify only for production.
What's the difference between minifying and gzip compression
Minification removes characters (20-40%). Gzip/Brotli compresses binary (60-85%). Apply both: minify first, then server compresses. Combined: 80-90% reduction.
Do modern frameworks auto-minify
Yes. Next.js, Vite, Nuxt, Angular all auto-minify in production builds.
What are source maps and should I use them
Maps connect minified code to original for debugging. In dev: always. In production: use private maps (error tracking only, not public).
How much does minification improve loading speed
Depends on original size. 200KB JS minified saves ~80KB (40%). With gzip/brotli, transfer drops to ~28KB (86% less). On 3G: ~1 second faster.