Zo minificeer je JavaScript — aanbevolen tools en methoden

De meeste gebruikers verlangen tegenwoordig naar een elegante en soepele surfervaring op het web en JavaScript is dan ook al lang een favoriet van ontwikkelaars om deze verbeterde ervaring te bieden.

JavaScript is er echter niet alleen om sites er mooier uit te laten zien. Het heeft ook rechtstreeks invloed op de prestaties en het succes van de website. Het versnellen van een website of het verkorten van de laadtijd van de pagina – twee concepten die de kern vormen van JavaScrip ontwikkeling – zijn cruciale factoren voor het verbeteren van de gebruikerservaring.

Bekijk onze videogids voor het minimaliseren van JavaScript

Als je de prestaties van je website binnen de kortst mogelijke tijd wilt verbeteren, moet je vertrouwd raken met JavaScript minificatie. Het zal je helpen alle onnodige tekens uit je JavaScript broncode uit te sluiten zonder de functionaliteit te wijzigen. Bovendien vermindert het de laadtijd en het bandbreedtegebruik van je website.

JavaScript minificatie kan lastig zijn. In dit artikel zullen we een pad uitstippelen om je te helpen bij het verkleinen van je JavaScript code voor WordPress en niet-WordPress websites.

Wat is JavaScript?

JavaScript is een tekstgeoriënteerde scripttaal voor het maken van interactieve websites aan zowel de client- als de serverzijde. Het is een eenvoudigere en minder complexe taal om te leren dan de meeste andere talen, wat het wijdverbreide gebruik verklaart.

Terwijl HTML en CSS de structuur van een website bouwen, voegt JavaScript complexe features toe die voor interactiviteit op je website zorgen om zo voor interactie met de gebruik te zorgen. JavaScript biedt bijvoorbeeld complexe elementen zoals scrollende videojukebox, 2D/3D video’s en interactieve kaarten.

Met name webbrowsers kunnen JavaScript begrijpen. Daarom is het, naast HTML en CSS, een goede keuze om te kiezen als je geïnteresseerd bent in webontwikkeling. Als je een zeer interactieve website moet maken die in alle browsers zonder enige belemmering werkt, dan is JavaScript de meest betrouwbare optie die je kunt gebruiken.

Wat is codeminificatie?

Minificatie wordt ook wel minimalisatie genoemd. Codeminificatie betekent het optimaliseren van code om ruimte te besparen, de laadtijden van pagina’s te verkorten en het bandbreedtegebruik van de website te verlagen. De grootste zorg is echter om de code te minimaliseren zonder de functionaliteit te wijzigen.

Codeminificatie is mogelijk in alle kernprogrammeertechnologieën, inclusief HTML, CSS en – zoals we zullen zien – JavaScript. Het proces is echter niet onmiddellijk. Er is wat werk nodig om code compacter te maken en toch functioneel te houden.

Om JavaScript code te minificeren, moet je deze parseren, comprimeren en de uitvoer ophalen. Als het eenmaal is geminified, zou het bijna onleesbaar moeten zijn voor het blote oog. Je hebt alle onnodige spaties, opmerkingen, nieuwe regeltekens en alles verwijderd dat de code aanvankelijk leesbaar maakte.

Mogelijk moet je ook nog enkele wijzigingen in de code aanbrengen, bijvoorbeeld door functies in te voeren, blokscheidingstekens te verwijderen, impliciete voorwaarden te gebruiken of lokale variabelen te herschrijven.

Voorbeelden van niet- geminified versus geminified JavaScript code

Laten we eens kijken naar wat voorbeeldcode. Dit eerste blok is normaal, niet-geminificeerd JavaScript:

// program to check if the string is palindrome or not

function checkPalindrome(str) {

    // find the length of a string
    const len = string.length;

    // loop through half of the string
    for (let i = 0; i < len / 2; i++) {
        // check if first and last string are same
        if (string[i] !== string[len - 1 - i]) {
            return 'It is not a palindrome';
        }
    }
    return 'It is a palindrome';
}

// take input
const string = prompt('Enter a string: ');

// call the function
const value = checkPalindrome(string);

console.log(value);

Laten we nu eens kijken hoe diezelfde code eruitziet als deze is geminificeerd:

function checkPalindrome(n){const t=string.length;for(let n=0;n<t/2;n++)
if(string[n]!==string[t-1-n])return"It is not a palindrome";return"It is a palindrome"}
const string=prompt("Enter a string: "), value=checkPalindrome(string);console.log(value);

Zoals je kunt zien, is het tweede codeblok veel kleiner en compacter. Dat betekent dat het sneller wordt geladen en weergegeven, waardoor de laadtijd van de pagina wordt verkort en de content wordt versneld.

Hier hebben we 529 bytes teruggebracht tot 324 bytes, waardoor we 205 bytes vrije ruimte hebben gewonnen en de paginabelasting met bijna 40% is verminderd.

Het is alsof je een boek van 529 pagina’s neemt en het samenvoegt tot een boek van 324 pagina’s. Natuurlijk zou een mens moeite hebben om het te lezen, maar een machine zou er zonder problemen doorheen gaan.

Bij het verbinden van meerdere JavaScript bestanden tot een individueel geminificeerd bestand, vermindert codeminificatie het aantal HTTP verzoeken aan de server. Dit verlaagt ook het bandbreedteverbruik van de site. Bovendien verkort codeminificatie de tijd die een script nodig heeft om uit te voeren – allemaal dingen die je Time to First Byte (TTFB) verlagen.

Waarom zou je JavaScript code minificeren?

Bij het schrijven van de initiële code richten de meeste ontwikkelaars zich vooral op het voor elkaar krijgen van dingen. Hierdoor hebben ze de neiging om veel opmerkingen, spaties en variabelen te gebruiken om de code leesbaarder te maken voor anderen die er in de toekomst mee zullen werken.

Ondanks dat het een uitstekende programmeertaal is, heeft JavaScript de neiging om webpagina’s te vertragen. Om wat terug te doen en de laadsnelheid van je pagina te verbeteren, moet je de JavaScript code dus minificeren.

De geminificeerde versie van JavaScript code kan de bestandsgrootte met maar liefst 30-90% verkleinen. Het gevolg is dat JavaScrip minificatie een bekend ritueel geworden voor alle ontwikkelaars.

Elke grote JavaScript bibliotheek ontwikkelaar (Angular, Bootstrap, enzovoort) levert een geminificeerde versie van JavaScript voor implementatie in de productie-omgeving. En elk gebruikt een min.js extensie om dit aan te geven.

Voordelen van het minificeren van JavaScript code

Hier is een kort overzicht van de voordelen die je zult behalen na het gebruik van JavaScript minificatie:

• Vermindering van paginalaadtijd
• Minder bandbreedteverbruik op je website
• Lagere uitvoeringstijd van scripts
• Minder HTTP verzoeken naar (en een lichtere belasting van) de server
• Diefstalbeveiliging (geminificeerde of uglified versies zijn moeilijk te lezen en te stelen voor hergebruik)

Verschil tussen JavaScript minificatie, uglificatie en compressie

JavaScript minificatie, uglificatie of compressie zijn vergelijkbaar in wat ze doen. Ze dien echter verschillende doelen.

JavaScript uglificatie herschrijft de code om deze minder leesbaar voor mensen te maken. Het proces verwijdert de witruimte, puntkomma’s en opmerkingen terwijl variabelen en inline functies worden hernoemd om de code moeilijk leesbaar te maken.

JavaScript heeft een bibliotheek met de naam UglifyJS om code automatisch te uglifyen. Het verbetert de prestaties en vermindert de leesbaarheid om de code veilig en minder aantrekkelijk te maken voor dieven.

Compressie is anders dan minificatie of uglificatie. Het gebruikt een compressie algoritme zoals GZIP om de code in een binair format te herschrijven, waardoor het veel kleiner is en sneller wordt geladen.

Terwijl minificatie zorgt voor vermindering van witruimten en opmerkingen, transformeert het uglificeren van een code deze in een onleesbare vorm door de functienamen, variabelenamen, enz. te veranderen. En compressie herschrijft de code naar binair om de bestandsgrootte te verkleinen.

Zowel minificatie als compressie zijn omkeerbaar, wat betekent dat je de code terug kunt zetten naar zijn oorspronkelijke vorm, maar uglificatie is onomkeerbaar.

Zo minificeer je JavaScript code

Je kunt je JavaScript code op verschillende manieren minificeren. Elk van deze methoden heeft zijn eigen benadering.

Het is bijna onmogelijk om alle codes in grote JavaScript bestanden handmatig te minificeren. Het handmatig minificeren van JavaScript bestanden is alleen mogelijk voor kleine bestanden omdat het zo tijdrovend is.

Om het handmatige JavaScript minificatieproces te starten, open je je JavaScript bestand in je favoriete teksteditor en verwijder je handmatig alle spaties een voor een. Het duurt een paar minuten om alle spaties en opmerkingen te verwijderen die voor het JavaScript bestand zijn ingesteld. Sommige van deze teksteditors ondersteunen mogelijk regular expressions, wat het proces aanzienlijk zou kunnen versnellen.

De andere optie is om minificatietools op je computer te installeren en deze vanaf de opdrachtregel te gebruiken. Je moet het bestand selecteren dat je wilt minificeren en het samen met het doelbestand aan de opdrachtregel toevoegen. Dan zou de minificatietool voor de rest zorgen.

Zo minificeer je JavaScript handmatig: top 5 tools

Ontwikkelaars gebruiken verschillende JavaScript minificatietools om de code te minificeren en betere prestaties te krijgen. Elke ontwikkelaar heeft echter zijn individuele voorkeur en kiest voor een andere tool. Er zijn tal van JavaScript minificatietools die allemaal hun eigen eigenschappen hebben, dus je moet je keuze zorgvuldig overwegen.

We vermelden deze tools niet op basis van een rangorde of categorie. We hebben alleen de meest effectieve en populaire JavaScript minificatietools opgenomen.

Hier zijn de beste JavaScript minificatietools die je kunnen helpen je webprestaties te verbeteren.

1. JSMin

JSMin is een speciale JavaScript minificatietool en -bibliotheek die werkt via de opdrachtregel waarmee je JavaScript code kan minificeren en de code zo licht mogelijk kan maken. Installeer JSMin simpelweg als een globaal script en het zal alle spaties en onnodige opmerkingen zeer effectief uit de code verwijderen. Als gevolg hiervan kan het je JavaScript bestandsgrootte onmiddellijk met ongeveer 50% verminderen.

Het stimuleert ook een meer expressieve programmeerstijl omdat het door het verwijderen van commentaar en documentatie een snellere download realiseert.

JSMin heeft echter één nadeel, namelijk dat het geen optimale besparingen oplevert. Vanwege het simplistische algoritme laat het veel regelinvoertekens ongewijzigd, omdat ze de kans op bugs in de nieuwe code willen minimaliseren.

2. Microsoft Ajax Minify

Microsoft Ajax Minifier stelt je in staat om de prestaties van je webapplicaties te verbeteren door de grootte van zowel JavaScript als CSS bestanden te minificeren. Het verwijdert de opmerkingen, onnodige spaties, puntkomma’s, functies en haakjes.

Naast het inkorten van de lokale variabelen, functienamen, aanhalingstekens/dubbele aanhalingstekens, het combineren van aangrenzende variabele declaraties, worden de niet uitgevoerde codes verwijderd.

Met AjaxMin kun je de productiviteit analyseren en de JS minifier op de achtergrond opladen. En wanneer de minificatie is voltooid, kun je de productiviteitsmap openen.

3. Google Closure Compiler

Google Closure Compiler is een andere uitstekende JavaScript minificatietool. Het formuleert JavaScript voor snel downloaden en betere prestaties. Het verifieert verder de syntaxis en changeable suggesties, verwijdert dode code en typen, en stelt je op de hoogte van JavaScript drawbacks. Deze tool verzamelt je JavaScript, evalueert het, verwijdert overtollige code en herschrijft het.

Het geeft ook waarschuwingen voor illegaal JavaScript en mogelijk gevaarlijke operaties. Bovendien is het een goede compiler van gewoon JavaScript naar een beter en geminificeerd JavaScript.

4. YUI Compressor

YUI compressor is een JavaScript en CSS minificatietool (via de opdrachtregel) die voor een hogere compressieverhouding zorgt dan de meeste concurrenten. Het is een minificatietool geschreven in Java en vertrouwt op Rhino om het JavaScript bronbestand te tokeniseren.

Ten eerste onderzoekt YUI het JavaScript bronbestand om de constructie ervan te bepalen. Vervolgens print het de tokenstream. Vervolgens worden zoveel mogelijk witruimtetekens verwijderd en worden alle lokale symbolen vervangen door een symbool van 1 (of 2 of 3) letter(s).

Omdat de YUI compressor open-source is, kun je de broncode onderzoeken om te leren hoe deze werkt. Bovendien is YUI de veiligste JavaScript minificatietool met een prima compressieverhouding.

5. UglifyJS

UglifyJS is een van de meest populaire JavaScript minificatietools. Het kan JavaScript code parsen, minificeren en comprimeren. Bovendien genereert de tool een bronbestand terwijl het wordt gecomprimeerd om terug te gaan naar je oorspronkelijke code.

Het kan ook meerdere invoerbestanden tegelijk gebruiken, waarbij eerst de invoerbestanden worden geparseerd en vervolgens de opties worden geparseerd.

UglifyJS analyseert invoerbestanden in volgorde en past eventuele compressie opties toe. De bestanden worden in hetzelfde globale bereik geparseerd, wat betekent dat een verwijzing van het ene bestand naar een variabele/functie die in een ander bestand is gedeclareerd, op de juiste manier wordt vergeleken.

Zo minify je JavaScript automatisch: Top 5 tools

Er is een overvloed aan online JavaScript minifiers om je code online te comprimeren. Bijna alle online JavaScript minificatietools volgen een vergelijkbaar minificatieproces.

Eerst kopieer en plak je je JavaScript broncode of upload je het broncodebestand naar de tool. Vervolgens optimaliseer je de instellingen van de minificatietool om een ​​specifieke, uitvoer te krijgen die bij jou vereisten aansluit, als er opties beschikbaar zijn.

Ten slotte neem je dat geminificeerde bestand en gebruik je het op de website in plaats van de originele, uitgebreide code (hoewel je het originele broncodebestand wel wil bewaren, voor het geval dat).

Hier zijn 5 van de beste online JavaScript minificatietools die je kunnen helpen je webprestaties te verbeteren. Hoewel we deze tools niet in een bepaalde volgorde of categorie vermelden, hebben we alleen de meest populaire en effectieve JavaScript minificatieoplossingen opgenomen.

1. Toptal JavaScript Minifier

De Toptal JavaScript Minifier biedt een efficiënte maar eenvoudige online JavaScript minifier waarmee je je JavaScript binnen een paar seconden kunt condenseren. Je kunt de code ook converteren naar een .js bestand voor toekomstig gebruik.

2. JSCompress

JSCompress kan de grootte van je JavaScript met 80% minificeren en verkleinen. Het biedt een eenvoudige click-and-go interface waar je je code kunt plakken of je .js bestand kunt uploaden voor minificatie. Je ontvangt de geminificeerde uitvoer als schone, kopieerbare code in plaats van een .js bestand. De tool gebruikt met name UglifyJS en Babel minify om JavaScript te minificeren en te comprimeren.

3. Minifier.org

Minfier.org is een van de meest simplistische JavaScript minifiers die je kunt gebruiken om je codes te minificeren. Het gebruikt meerdere methoden om JavaScript code te minificeren. De tool weegt de grootte van je JavaScript code zowel voor als na de minificatie. Vervolgens berekent het de winst van het script na de minificatie en geeft het op het scherm weer.

4. TutorialsPoint Online JavaScript Minifier

Je kunt een .js bestand invoeren, een URL opgeven of je onbewerkte code rechtstreeks in de TutorialsPoint JavaScript minificatietool plakken. De tool heeft een bewerkbaar veld om desgewenst direct te coderen. Bovendien heeft het een single-click minificatieoptie en kun je de geminificeerde code downloaden in een .js bestand.

5. Packer: Dean Edwards JavaScript Compressor

Als je je JavaScript code moet comprimeren, kan de Packer van Dean Edwards je een van de meest bevredigende online JavaScript compressie ervaringen bieden. Het werkt met JavaScript tokens/atoms en bit- en bytepatronen.

Bovendien kun je de optie Base62 codering en Shrink variabelen implementeren terwijl je je code minified. Om je JS code te minificeren, kopieer en plak je deze in JavaScript en druk je op de pack knop. Het genereert automatisch geminificeerde code voor je.

Zo minificeer je Javascript in WordPress: top 5 tools en plugins

JavaScript minificatie volgt een andere procedure in WordPress. Het minificeren van JavaScript vereist ondersteuning van je host of het installeren van een WordPress plugin. Na het installeren van een WordPress minificatieplugin, neemt deze het minificatieproces voor jou uit handen.

Er zijn talloze WordPress plugins voor JavaScript minificatie. De meeste van deze plugins volgen dezelfde minificatieprocedure en kunnen worden uitgevoerd vanaf het WordPress dashboard.

Laten we eens kijken naar enkele van de meest effectieve tools voor JavaScript modificatie in WordPress:

1. WP Rocket

WP Rocket minimaliseert en combineert JavaScript- en CSS-bestanden en kan de non-blocking levering van beide verbeteren. WP Rocket en Kinsta zijn een bijzonder goede combinatie omdat de cachingmogelijkheden automatisch worden uitgeschakeld ten gunste van de service van Kinsta, maar de cache-opruimfunctie werkt met onze omgeving. Je kunt de plugin gebruiken op testomgevingen bij Kinsta zonder dat die installaties meetellen voor je WP Rocket licentielimiet.

2. W3 Total Cache

Met W3 Total Cache kun je JavaScript, CSS en HTML minificeren met uitgebreide controle. Bovendien kun je hiermee inline, ingesloten of externe JavaScript of CSS code minificeren. Het stelt ook JavaScript en CSS uit voor sneller laden van pagina’s, afgezien van minificatie. Bovendien bieden de plugins meerdere JavaScript minificatiemogelijkheden voor WordPress websites.

3. WP-Optimize

WP Optimize is een WordPress optimalisatie plugin die een geavanceerde minificatietool biedt om CSS en JavaScript te minificeren, naast het wissen van de cache en het optimaliseren van je WordPress website. Het stelt je ook in staat om CSS en JavaScript uit te stellen. Als gevolg hiervan laadt de site de niet-kritieke items na het laden van de hoofdpagina, waardoor de paginaprestaties worden verbeterd.

4. Autoptimize

Autoptimize is een WordPress minificatieplugin die niet-geaggregeerde CSS en JavaScript verzamelt, minificeert en cachet om de laadtijd van pagina’s te verminderen en de prestaties van je website te verbeteren. Het kan de scripts minificeren en cachen, het kritieke JavaScript inline en het niet-geaggregeerde JavaScript asynchroniseren.

Als je uitkijkt naar een WordPress JavaScript minificatieplugin die zich primair richt op de prestaties van je website, dan is Autoptimize een uitstekende keuze.

5. Fast Velocity Minify

Fast Velocity Minify biedt geavanceerde JavaScript, CSS en HTML minificatie voor WordPress gebruikers. Het doet de minificatie op de frontend wanneer het eerste niet-gecachete verzoek plaatsvindt. Bovendien heeft de plugin een eenvoudige gebruikersinterface en eenvoudige bruikbaarheid.

Samenvatting

Om de ultieme prestaties uit je webpagina te halen, moet je op kleine details letten. Dus door HTML, CSS en JavaScript te minificeren, kan je weer een taak afvinken in je strijd voor een snellere website.

We hebben talloze tools en plugins onderzocht die je kunnen helpen bij de minificatie van JavaScript. Elke genoemde tool of plugin heeft echter hetzelfde doel en werkt efficiënt.

Selecteer op basis van je gebruik een tool uit deze lijst en begin met het minificeren van je JavaScript code voor snellere websiteprestaties.

Hebben we een JavaScript minificatietool of WordPress minificatieplugin gemist? Laat het ons weten in de comments!

Zadhid Powell

Zadhid Powell is een Computer Engineer die het coderen heeft opgegeven om te gaan schrijven! Daarnaast is hij een Digital Marketeer, technologieliefhebber, SaaS-expert, lezer en fervent volger van softwaretrends. Hij is vaak te vinden in downtown clubs met zijn gitaar of tijdens het inspecteren van oceaanbodems tijdens het duiken.

• Website
• LinkedIn
• Twitter