Het verschil tussen Concat, Uglify en Minify

Het verschil tussen Concat, Uglify en Minify

Dit artikel is ouder dan vier jaar. De inhoud kan verouderd zijn, vooral bij technische voorbeelden of verwijzingen naar tooling.

Tools zoals Gulp en Grunt helpen front-end developers bij de ontwikkeling van websites of webapplicaties. De termen Concat, Uglify en Minify worden door beide tools gebruikt, maar wat betekenen deze termen en nog belangrijker, wat kunnen we ermee?

Concat

Concat komt van het woord concatenation, wat letterlijk vertaald betekent dat tekenreeksen op elkaar worden aangesloten. Bij Grunt of Gulp tasks betekent dit dat verschillende bestanden worden samengevoegd tot één bestand. Verschillende javascript bestanden worden bijvoorbeeld samengevoegd tot één javascript bestand. Het voordeel van het hebben van één bestand is dat de laadtijd van een website of webapplicatie verminderd wordt.

Uglify

Uglify is de naam van het proces om code onleesbaar te maken. Variables, functienamen krijgen andere onleesbare namen zodat reverse engineering van de code lastig wordt. Dit zorgt er voor dat programmeurs en hackers de code niet of nauwelijks kunnen lezen en begrijpen en eventuele onveilige code niet snel gevonden wordt.

Minify

Minify is de naam van het proces om de geschreven code compacter te maken. Zo worden spaties, enters, semicolons en optione brackets uit de code verwijderd. Minification zorgt ervoor dat de grootte van een bestand vors wordt verminderd wat ten goede komt aan de download snelheid van het bestand.

Conclusie

Voor een optimaal werken website is het aan te raden om een combinatie van concatenation, uglifying en minification te gebruiken. Dit maakt de geschreven code veiliger en zorgt er voor dat de website of webapplicatie sneller zal laden. Tools zoals Gulp en Grunt helpen goed. Je kunt ook applicaties zoals PrePros of CodeKit gebruiken als je minder bekend bent met command line tools.

Reacties

Er zijn nog geen reacties, laat je reactie achter.

Laat een reactie achter

Heb je een aanvulling, vraag of eigen ervaring bij dit artikel? Deel hem hieronder.

Reacties worden eerst kort gecontroleerd voordat ze zichtbaar zijn.

Bekijk alle artikelen

The difference between debounce and throttle

Debounce and throttle are powerful techniques, but only if you really understand what they do. I often ask about them in tech interviews, and to my surprise, many developers (even seniors) struggle to explain the difference. The good news is: it’s actually quite simple. In this post, I’ll break down both techniques and share some practical use cases. If you are unfamiliar with the techniques and are asked about them too in your interview…

Continue reading

4 performance tips voor AngularJS apps

4 performance tips voor AngularJS apps

Two-way binding heeft webdevelopment veranderd. 'live' laten zien aan gebruikers wat er gebeurt en 'live' verwerken van de input van gebruikers zorgen voor de gebruikers voor een prettige ervaring. Een ander voordeel is dat jij als developer nauwelijks code in de view-layer van je applicatie hoeft te schrijven om…

Lees verder

Code coverage is not a quality metric

You've just finished a new feature. The pull request is approved, the pipeline is green, and your coverage report proudly shows 100%. Great. Right? Well, not necessarily. One of the biggest misconceptions I still encounter in software teams is the belief that a high coverage percentage automatically means high quality software. It doesn't. In fact, I've seen teams proudly report 90%+ coverage while still shipping serious production…

Continue reading