Webpack - De static module bundler

Webpack - De static module bundler

De snelheid en veerkracht van je website en/of online applicatie is belangrijker dan ooit. Om te kunnen voldoen aan de steeds strengere eisen van onze opdrachtgevers t.b.v. veiligheid en prestatie, ontwikkelt onze dienstverlening zich continue. Dit geldt niet alleen voor het zichtbare aspect, maar ook zeker voor het onzichtbare deel van jouw website.

Dit doen we bijvoorbeeld door alle JavaScript, CSS code en afbeeldingen te compileren, verkleinen en pas in te laden waar je het echt nodig hebt.Op deze manier optimaliseren we onze websites en zorgen we ervoor dat ze een stuk sneller werken. Dat werkt fijn en is ook nog eens zeer voordelig voor de vindbaarheid.

In dit bericht vertellen we iets over een van de tools die we gebruiken bij de ontwikkeling van onze producten. Webpack.

Wat is Webpack?

Webpack is een static module bundler voor moderne (web) applicaties. Naast het verkleinen van javascript bestanden kan het ook een bundle maken van alles wat je nodig hebt. Zo kan het afbeeldingen, css, lettertypes en nog veel meer opnemen in een bundle.
 
Webpack omschrijft zichzelf als “static module bundler”. In grote lijnen komt het erop neer dat je als web developer 'modules' kan definiëren en zo je code kan opsplitsen in kleinere en makkelijk te onderhouden blokken. Webpack zorgt ervoor dat deze blokken automatisch en waar nodig worden ingeladen in de website. Het ‘automatisch inladen’ van deze blokken zorgt ervoor dat enkel datgene wat nodig is wordt ingeladen. Met snellere websites en minder data-verbruik als gevolg. 

Caching

Een veelvoorkomend probleem bij web ontwikkeling is caching. Caching is het tijdelijk bewaren van data voor een snellere toegang. Gebruik maken van een cache heeft veel voordelen, zoals een snellere laadtijd.

Een veel voorkomend knelpunt voor onze webdevelopers: een stuk code van een website is aangepast, maar sommige gebruikers zien nog de oude versie van de website. Een vervelende situatie als we de nieuwe aanpassingen vol trots willen laten zien aan onze klanten.
Webpack zorgt ervoor dat aangepaste bestanden automatisch een andere versienummer krijgen waardoor deze niet worden meegenomen in de “internet geschiedenis” van onze klanten.
 
Al met al een interessant inkijkje in onze keuken, maar uiteindelijk gaat het er natuurlijk vooral om dat we slimme, schaalbare en onderhoudsvriendelijke digitale oplossingen bieden die niet alleen nu goed werken, maar ook in de toekomst.