Geen upload, 100% lokaal, geen account

Minify / verfraaien

Minify of verfraai code. Alles blijft in je browser.

Hoe Minify / verfraaien werkt

Minificeren/verfraai en comprimeert HTML, CSS en JavaScript door opmerkingen, onnodige witruimte en redundante tekens te verwijderen, of breidt geminificeerde code terug uit naar een leesbare ingesprongen vorm. Alle verwerking vindt in de browser plaats via meegeleverde parsers; niets dat je plakt, wordt ergens naartoe verzonden. Niets dat je hier typt, verlaat je apparaat.

Minificatie heeft direct invloed op de laadprestaties van pagina's: kleinere bestanden worden sneller overgedragen, sneller geparseerd en verbruiken minder bandbreedte. Voor productie-implementaties zijn geminificeerde assets de standaard. Dit hulpmiddel is handig wanneer je een geminificeerd bestand ontvangt dat je moet lezen (verfraai en), wanneer je wilt controleren wat een minificator met een fragment doet voordat je het in een bouwpipeline integreert, of wanneer je een snelle eenmalige minificatie nodig hebt zonder een bouwprogramma in te stellen.

Geschreven door Bastien Sulyan

Hoe je Minify / verfraaien gebruikt, stap voor stap

  1. Plak je HTML-, CSS- of JavaScript-code in het invoergebied.
  2. Selecteer het taaltype uit het vervolgkeuzemenu (HTML, CSS of JavaScript).
  3. Klik op 'Minificeren' om de gecomprimeerde versie te produceren, of 'Verfraai en' om de code uit te breiden en in te springen.
  4. Kopieer het resultaat uit het uitvoergebied via de kopieerknop.
  5. Plak andere code en herhaal indien nodig.

Veelvoorkomende toepassingen

  • Een front-endontwikkelaar wil een kritiek CSS-fragment minificeren om het inline op te nemen in de HTML-kop voor above-the-fold-prestaties.
  • Een ontwikkelaar ontvangt een geminificeerd script van derden en moet het verfraai en om de logica te begrijpen tijdens een beveiligingsbeoordeling.
  • Een technisch schrijver heeft een opgemaakte versie nodig van een geminificeerde JSON-LD-script-tag om in documentatie op te nemen.
  • Een webontwikkelaar controleert de bytebesparing van het minificeren van een CSS-bestand voordat hij beslist of hij een bouwstap toevoegt.

Veelgestelde vragen

Wordt de code die ik plak naar een server gestuurd voor minificatie?

Nee. De minificatie en opmaakverfraaiing worden uitgevoerd door de eigen code van de pagina, geschreven voor dit hulpmiddel in plaats van afkomstig van een minificator van derden. Alle verwerking blijft in het browsertabblad. Niets dat je hier plakt, wordt verzonden naar Sunasty of een derde partij.

Behoudt JavaScript-minificatie het oorspronkelijke gedrag van de code?

Een goede minificator behoudt het gedrag door alleen witruimte te verwijderen, variabelenamen binnen een gecontroleerd bereik in te korten en opmerkingen te verwijderen. Dit hulpmiddel richt zich op veilige transformaties. Agressieve optimalisaties zoals eliminatie van dode code of functie-inlining worden over het algemeen niet toegepast, omdat deze een volledige programmaanalyse vereisen.

Kan ik het resultaat minificeren en daarna verfraai en om het te verifiëren?

Ja. Minificeer de code eerst, plak de geminificeerde uitvoer terug in het invoer en klik op Verfraai en. De verfraai de versie ziet er anders uit dan de originele bron (variabelenamen kunnen zijn ingekort, opmerkingen verwijderd) maar is structureel gelijkwaardig.

Verwijdert HTML-minificatie alle opmerkingen?

Het hulpmiddel verwijdert standaard HTML-opmerkingen (<!-- ... -->) tijdens minificatie. Voorwaardelijke opmerkingen die worden gebruikt door oude IE-versies (<!--[if IE]...-->) worden altijd bewaard, zodat het verwijderen van opmerkingen verouderd gedrag dat daarvan afhangt niet kan breken.

Is er een groottelimiet voor de code die ik kan minificeren?

De limiet is het beschikbare geheugen van je browsertabblad. Code tot een paar honderd kilobytes wordt snel verwerkt. Voor grote JavaScript-bundels (megabytes) is een speciaal bouwprogramma zoals esbuild, Terser of Lightning CSS sneller en beter geschikt voor productiegebruik.