Encoders & Utilities

CSS / JS Minifier

Minify CSS of JavaScript: commentaar en whitespace weg, autodetect, byte-stats, kopiëren/downloaden.

What this does

CSS — strips /* comments */, collapses whitespace, removes trailing semicolons, tightens punctuation.
JavaScript — strips // line and /* block */ comments, collapses whitespace, tightens braces and parens. Preserves string and template literals.

Note: this is a safe regex minifier — no variable renaming (mangling) and no dead-code elimination. Use Terser / esbuild in your build pipeline for production-grade compression.

Over deze tool

CSS / JS Minifier verwijdert alles wat de browser niet nodig heeft: commentaar, overbodige whitespace, trailing puntkomma's en (voor CSS) optionele eenheden na nul. Plak uw bestand of sleep het op de pagina; de tool auto-detecteert of u CSS of JavaScript hebt overhandigd en past de juiste regelset toe. De originele en geminificeerde groottes worden zij-aan-zij getoond met het percentage bespaard.

Voor CSS volgen we een conservatieve regelset — veilig over alle browsers, geen specificiteitswijzigingen, geen shorthand-herzieningen die cascade-gedrag kunnen veranderen. Voor JavaScript stript de minifier commentaar en collapse-t whitespace, maar hernoemt geen variabelen of mangle-t geen identifiers (dat zou een parser vereisen en risico's opleveren voor het breken van eval / dynamische property-toegang). Voor agressieve minificatie (terser, esbuild, swc) gebruikt u een build-time-tool; dit is de juiste tool voor snelle "maak dit kleiner voordat ik het in een e-mail plak"-taken.

Wanneer gebruikt u deze tool

Pre-deploy quick win. Een kleine inline <style> of <script> die niet door uw bundler gaat, profiteert nog steeds van minificatie.
E-mail- en AMP-templates. Inline-CSS raakt groottelimieten; whitespace strippen kan 30–40% besparen.
Kopiëren-plakken in config. Lange JS-snippets in YAML- of JSON-config-bestanden worden veel leesbaarder wanneer geminificeerd.
Byte-besparingen verifiëren voordat u zich vastlegt op een build-tool-wijziging.

Wat we bewust niet doen

Geen variabele-hernoeming, geen dead-code-eliminatie, geen expressie-herziening. Deze wijzigingen kunnen code breken die op identifier-namen vertrouwt (debug, monkey-patching, dynamische this), en de veiligheidsgaranties vereisen een volledige AST-bewuste parser. Gebruik voor productie-builds terser of esbuild; de besparingen zijn groter maar het veiligheidsoppervlak is veel breder. Deze tool geeft u de eenvoudige 50% met nul risico.

Veelgestelde vragen

Hoeveel kleiner wordt mijn bestand?

Typische besparingen: 30–50% voor CSS, 20–40% voor JavaScript. Sterk gecommentarieerde bronbestanden kunnen 60%+ besparingen raken. Reeds geminificeerde invoer krijgt weinig voordeel (de minifier draait nog steeds idempotent — hem twee keer draaien breekt niets). Voor agressievere besparingen, koppel met gzip/brotli-compressie op serverniveau, wat multiplicatief is met minificatie.

Werkt het op TypeScript?

Niet direct — TypeScript is geen geldig JavaScript en onze minifier verwacht JS. Compileer uw TS eerst naar JS (tsc, esbuild, swc) en minificeer de output. Voor type-geannoteerde bron is een TS-bewuste tool als esbuild of swc de juiste keuze die zowel type-strippen als minificatie in één pas doet.

Zal geminificeerde CSS mijn layout breken?

Nee — de minifier behoudt selector-specificiteit, property-volgorde en at-rule-structuur exact. De enige gedragsmatige verandering is whitespace-collapse en commentaarverwijdering, beide die CSS als onbetekenend behandelt. Als u een visuele diff ziet na minificatie heeft u een bug geraakt — meld een rapport met de input.

Werkt dit voor inline source maps?

Het stript ze (het //# sourceMappingURL=-commentaar is een commentaar en verdwijnt). Voor productie wilt u meestal een apart .map-bestand genereren naast de geminificeerde output, voorwaardelijk geserveerd. Onze tool genereert geen source maps — dat vereist een volledige parser en is de verantwoordelijkheid van een build-pipeline. Gebruik esbuild / terser voor die workflow.