CSS- und JavaScript @import-s in womodo 7.3

5. Februar 2017

Moderne Webprojekte versuchen, mit einem einzigen <script src="..."> Tag und einem einzigen <link href="..."> Tag im HTML HEAD auszukommen und die Skripte möglichst komprimiert zum Browser zu senden. Das führt in der Regel dazu, daß Seiten schneller laden und angezeigt werden, denn viele kleine CSS- und JavaScript Downloads verzögern das Rendern der Webseite, bis alle Skripte geladen sind.

Für Stylesheets existiert eine solche Möglichkeit seit Version 7.2: SCSS bieten mit seinem @import Mechanismus die Möglichkeit, viele einzelne (S)CSS-Resourcen zu einem einzelnen zusammenzuführen und der womodo SCSS Prozessor komprimiert das Ergebnis, um Ladezeiten zu minimieren.

Seit Version 7.3 bietet womodo einen solchen Mechanismus auch für JavaScripts, denn neben dem SCSS Prozessor besitzt womodo nun auch einen JSMIN Prozessor. Dieser kann beliebige JavaScript-Resourcen zusammenfassen und das Ergebnis komprimiert (per UglifyJS) ausgegeben.

JSMIN

Um mehrere JavaScript Skripte zusammenzufassen und komprimiert an den Browser zu senden schreibt man ein Script in /scripts/js mit der File Extention .jsmin. Adressiert wird so ein Script wie jedes normale JS-Script:

<script src="<tml:url type="js" name="my-script"/>"></script>

Dieses Skript kann normales JavaScript enthalten. Über bestimmte Anweisungen können aber weitere JS-Resourcen importiert werden.

Die Syntax ist:

//@import test
//@import test@base
//@import type=file db=ig /lib/s.js

function(){
// normales JavaScript ...
}

Allgemein:

//@import type=<file|js|static> db=<dbkey> /path/to/resource

Dabei sind type= und db= optional.

Die @import Anweisungen werden dabei in JavaScript Kommentaren eingebettet.

Build-Skripte sind nicht notwendig

Das JSMIN-Konzept bietet Entwicklern die Möglichkeit, komplexe JavaScripts in separaten Quelldateien zu verwalten, sie aber trotzdem komprimiert als einzelne Skript-Datei an den Browser zu senden. Build-Skripte wie bei anderen Systemen üblich sind dabei nicht notwendig. Womodo aktualisiert selbstständig die resultierende jsmin-Resource, wenn einzelne Quelldateien geändert wurden.