Wie optimiere ich Zugriff auf JavaScript (White Spaces, Kommentare, …)?
In einem ersten Schritt solle der JavaScript Code aus der Webseite in eine eigene Datei ausgelagert werden. Ist dies geschehen kann diese Datei vom Browser gecacht werden und braucht nicht bei jedem Zugriff erneut geladen werden. Überprüft werden kann das mit Tools wie Fiddler welche den HTTP-Traffic anzeigen und so aufdecken welche Dateien beim Zugriff auf eine Webseite wirklich abgerufen werden.
Danach gilt es die gerade erzeugte JavaScript Datei zu optimieren. Mögliche Optionen sind
- Kommentare entfernen
- White Spaces (Leerzeichen, Zeilenumbrüche, …)
- Variablen kürzen
- …
Glücklicherweise gibt es Tools die diese Arbeit (zumindest das Entfernen von White Spaces und Kommentaren) übernehmen :-)
- Free JavaScript Optimizer (Online Version) (https://www.xtreeme.com/javascript-optimizer)
- JSMin (https://www.crockford.com/javascript/jsmin.html )
- Javascript Minimizer (https://devtools.10try.com/)
Als Beispiel ein kleiner Codeschnipsel aus www.woistdaniel.de
// JScript File // holds the Virtual Earth Map var map = null; function LoadMap() { if (map == null) { map = new VEMap('myMap'); map.LoadMap(); map.SetMapStyle('r'); } } |
vs.
var map=null;function LoadMap(){if(map==null){map=new VEMap('myMap');map.LoadMap();map.SetMapStyle('r')}} |
Vor der Optimierung: 223 Bytes,
Nach der Optimierung: 107 Bytes
Ersparnis: 52,02% :-))
Schöne Grüße
Daniel