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 waits for a pause; throttle limits how often work can run while events keep arriving. That difference matters for search fields, scrolling and other frequent interactions. This article explains both techniques with practical use cases, helping you choose the behaviour your interface needs rather than treating them as interchangeable performance tricks.

Continue reading

4 performance tips voor AngularJS apps

4 performance tips voor AngularJS apps

Two-way binding is handig, maar een groeiend aantal watchers kan een AngularJS-app vertragen. Vier aandachtspunten helpen je bewuster om te gaan met de digestcycle en de kosten van databinding. Met onder meer one-time binding als manier om onnodig werk in de browser te beperken.

Lees verder

The bullshit of code coverage

A test suite can reach 100% coverage and still charge the wrong shipping fee or take a payment twice. Through boundary cases, misleading mocks and missing requirements, I examine what coverage actually proves. The useful question is not whether the code ran, but whether the tests would catch the mistakes your customers care about.

Continue reading