CSS en Javascript comprimeren
Voor webdesigners, uitgevers en ontwikkelaars is het belangrijk om webpagina's of webtoepassingen zo klein mogelijk te houden. Kleine bestanden zorgen er namelijk voor dat webpagina's sneller laden. Ze gebruiken dan ook verschillende design strategieën en technieken om dit doel te bereiken.
Een relatief simpele methode is "code minification". Daarbij worden alle overbodige tekens (denk aan spaties, regeleinde, commentaar, optionele scheidingstekens) uit de broncode verwijderd, waardoor deze kleiner wordt ten koste van de leesbaarheid. CSS en JavaScript wordt dikwijls verkleind om de hoeveelheid te verzenden gegevens te verkleinen.
Een veel gebruikt hulpmiddel om CSS en JavaScript te verkleinen is de YUI Compressor die deel uitmaakt van de YUI (Yahoo! User Interface) JavaScript bibliotheek en door Yahoo werd ontwikkeld. De YUI Compressor wordt zelfs ingezet in andere hulpmiddelen zoals Apache Ant of Maven, waardoor bij het bouwen van een webapplicatie deze automatisch met behulp van de YUI Compressor verkleind worden.
De YUI Compressor kan ook gebruikt worden om manueel CSS/JavaScript bestanden te verkleinen.
De YUI Compressor installeren
De YUI Compressor is in Java geschreven en is beschikbaar in een JAR bestand (en zijn broncode). Wij gebruiken de JAR versie.
Eerst moet de Java run-time omgeving op uw systeem geïnstalleerd zijn, dit is op de meeste distributies standaard geïnstalleerd.
Download en installeer de YUI Compressor als volgt:
dany@linux-2gcr:~>sudo mkdir -p /usr/share/javaroot's password: dany@linux-2gcr:~>sudo wget https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar -P /usr/share/java--2015-05-09 16:30:17-- https://github.com/yui/yuicompressor/releases/download/v2.4.8/yuicompressor-2.4.8.jar Herleiden van github.com (github.com)... 192.30.252.129 Verbinding maken met github.com (github.com)|192.30.252.129|:443... verbonden. HTTP-verzoek is verzonden; wachten op antwoord... 302 Found Locatie: https://s3.amazonaws.com/github-cloud/releases/85673/b8891712-efca-11e2-9bc0-2f537145d606.jar?response-content-disposition=attachment%3B%20filename%3Dyuicompressor-2.4.8.jar&response-content-type=application/octet-stream&AWSAccessKeyId=AKIAISTNZFOVBIJMK3TQ&Expires=1431181878&Signature=JeqFo%2FWywpkhoCpDKQXr0KDUpu8%3D [volgen...] --2015-05-09 16:30:18-- https://s3.amazonaws.com/github-cloud/releases/85673/b8891712-efca-11e2-9bc0-2f537145d606.jar?response-content-disposition=attachment%3B%20filename%3Dyuicompressor-2.4.8.jar&response-content-type=application/octet-stream&AWSAccessKeyId=AKIAISTNZFOVBIJMK3TQ&Expires=1431181878&Signature=JeqFo%2FWywpkhoCpDKQXr0KDUpu8%3D Herleiden van s3.amazonaws.com (s3.amazonaws.com)... 54.231.1.160 Verbinding maken met s3.amazonaws.com (s3.amazonaws.com)|54.231.1.160|:443... verbonden. HTTP-verzoek is verzonden; wachten op antwoord... 200 OK Lengte: 787524 (769K) [application/octet-stream] Wordt opgeslagen als: ‘/usr/share/java/yuicompressor-2.4.8.jar’ /usr/share/java/yui 100%[=====================>] 769,07K 346KB/s in 2,2s 2015-05-09 16:30:21 (346 KB/s) - '‘/usr/share/java/yuicompressor-2.4.8.jar’' opgeslagen [787524/787524]
Maak het volgende yc startscript aan:
dany@linux-2gcr:~> sudo vim /usr/bin/yc
#!/bin/sh
java -jar /usr/share/java/yuicompressor-2.4.8.jar "$@"
Vim is een regeleditor die bij het starten in de Opdrachten mode staat. Om het script te schrijven activeer je de Invoegen mode met de i-toets. Na het typen van het script, schakel je terug naar de Opdrachten mode met de Esc-toets. Typ de opdracht :wq gevold door Return om het script op te slaan en vim te verlaten.
Daarna geef je het script uitvoerrechten met de opdracht:
dany@linux-2gcr:~> sudo chmod +x /usr/bin/yc
Je kunt de YUI Compressor nu starten met de yc opdracht.
dany@linux-2gcr:~> yc
YUICompressor Version: 2.4.8
Usage: java -jar yuicompressor-2.4.8.jar [options] [input file]
Global Options
-V, --version Print version information
-h, --help Displays this information
--type <js|css> Specifies the type of the input file
--charset <charset> Read the input file using <charset>
--line-break <column> Insert a line break after the specified column number
-v, --verbose Display informational messages and warnings
-o <file> Place the output into <file>. Defaults to stdout.
Multiple files can be processed using the following syntax:
java -jar yuicompressor.jar -o '.css$:-min.css' *.css
java -jar yuicompressor.jar -o '.js$:-min.js' *.js
JavaScript Options
--nomunge Minify only, do not obfuscate
--preserve-semi Preserve all semicolons
--disable-optimizations Disable all micro optimizations
If no input file is specified, it defaults to stdin. In this case, the 'type'
option is required. Otherwise, the 'type' option is required only if the input
file extension is neither 'js' nor 'css'.
CSS of JavaScript verkleinen
Met de volgende opdracht verklein je een CSS bestand:
dany@linux-2gcr:~> sudo yc /srv/www/htdocs/linux/linux.css -o /srv/www/htdocs/linux/linux-min.css
Bekijk de winst met de volgende opdracht:
dany@linux-2gcr:~> wc /srv/www/htdocs/linux/linux*.css
201 551 4312 /srv/www/htdocs/linux/linux.css
0 115 3396 /srv/www/htdocs/linux/linux-min.css
201 666 7708 totaal
Hoewel de winst hier niet zo spectaculair is, wordt dit bestand ongeveer 20% sneller geladen. In CSS bestanden met veel commentaarregels, zoals een goede ontwerper het doet, kan je winsten behalen tot 300%.
Het gecomprimeerde bestand ziet er zo uit:
Om een JavaScript bestand te verkleinen, gebruik je de volgende opdracht:
dany@linux-2gcr:~> sudo vim /srv/www/htdocs/linux/linux.js
root's password:
dany@linux-2gcr:~> sudo yc /srv/www/htdocs/linux/linux.js -o /srv/www/htdocs/linux/linux-min.js
[ERROR] in /srv/www/htdocs/linux/linux.js
937:26:missing name after . operator
[ERROR] in /srv/www/htdocs/linux/linux.js
938:15:syntax error
[ERROR] in /srv/www/htdocs/linux/linux.js
958:1:syntax error
[ERROR] in /srv/www/htdocs/linux/linux.js
1:0:Compilation produced 3 syntax errors.
org.mozilla.javascript.EvaluatorException: Compilation produced 3 syntax errors.
at com.yahoo.platform.yui.compressor.YUICompressor$1.runtimeError(YUICompressor.java:172)
at org.mozilla.javascript.Parser.parse(Parser.java:396)
at org.mozilla.javascript.Parser.parse(Parser.java:340)
at com.yahoo.platform.yui.compressor.JavaScriptCompressor.parse(JavaScriptCompressor.java:315)
at com.yahoo.platform.yui.compressor.JavaScriptCompressor.<init>(JavaScriptCompressor.java:536)
at com.yahoo.platform.yui.compressor.YUICompressor.main(YUICompressor.java:147)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:497)
at com.yahoo.platform.yui.compressor.Bootstrap.main(Bootstrap.java:21)
Zoals je merkt, wordt de opdracht afgebroken met foutmeldingen. Tijdens het verkleinen wordt de broncode op mogelijke fouten gecontroleerd, waaronder op gereserveerde woorden (opdrachten). Hoewel dit niet altijd leidt tot fouten in de browser, vermijdt je toch best het gebruik van gereserveerde woorden, al was het maar voor de duidelijkheid. Na het aanpassen van de broncode kan je deze dan nog opnieuw proberen te verkleinen.