JavaScript-Dateien werden normalerweise über das script-Element in die Webseite eingebunden. Bei kleineren Projekten stellt das absolut kein Problem dar. Wächst aber das Projekt und steigt dabei die Komplexität, verliert man schnell den Überblick – und auch die Performance leidet zunehmend durch überflüssig geladene Skript-Bestandteile.

RequireJS ist ein JavaScript-Datei- und Modul-Loader, der mit Hilfe eines modularen Aufbaus die Geschwindigkeit und Qualität deines Codes verbessern kann. Durch eine strikte Aufteilung der Skripte und eine optimierte Laderoutine gewinnt man so an Struktur und Performance. Wir verraten dir, wie RequireJS funktioniert und wie du deine ersten Schritte mit der Bibliothek machen kannst.

RequireJS ist eine Bibliothek, die mit einer Asynchronen-Modul-Definition-API (AMD) ausgestattet, Code-Blöcke und deren Abhängigkeiten für dein Projekt laden und zur Verfügung stellen kann. Das bedeutet, dass du lediglich eine Datei in dein Dokument einbinden musst – egal wie viele Bibliotheken und Skripte du benötigst. Das Laden der benötigten Komponenten übernimmt dann RequireJS für dich.

Hierfür benötigt RequireJS eine feste Struktur, um das automatische Laden von Skripten zu ermöglichen. Für unser Beispiel werden wir exemplarisch ein Hilfs-Skript benutzen, um mit jQuery eine einfache DOM-Manipulation durchzuführen. Dabei werden wir auf folgenden Aufbau zurückgreifen:

• deinProjekt
  • projekt.html
  • /scripts
    • main.js
    • require.js
  • /libs
  • /helper
    • util.js

Im Projektordner befindet sich eine projekt.html-Datei, in der wir JavaScript ausführen wollen. Im Unterordner „/scripts“ befinden sich alle Skripte des Projekts. Dort hinterlegen wir die require.js-Datei und die main.js-Datei, mit der wir später die Steuerung übernehmen. Im Unterordner „/libs“ speichern wir verschiedene Bibliotheken und im Unterordner „/helper“ verschiedene Hilfs-Skripte, die wir zur Ausführung benötigen werden. Um RequireJS nutzen zu können, binden wir die Datei jetzt in unser Projekt ein. Hierfür reicht die folgende Code-Zeile aus:

<script data-main="scripts/main" src="scripts/require.js"></script>

Mit dem data-main-Attribut im script-Element teilen wir RequireJS mit, welche Datei zur Steuerung der Programmlogik benötigt wird. In unserem Fall ist es die main.js-Datei. Das Weglassen von „.js“ im data-main-Attribut ist hierbei keineswegs ein Fehler: RequireJS geht standardmäßig davon aus, dass alle benötigten Dateien die Endung „.js“ haben.

Innerhalb der main.js-Datei können wir jetzt die benötigten Bibliotheken und Skripte laden und ausführen. Hierfür definieren wir in der main.js-Datei zunächst den Pfad zur jQuery-Bibliothek. Dafür steht uns die requirejs.config()-Methode zur Verfügung.

requirejs.config({

paths: {

"jquery": [

"https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min",

// If the CDN fails, load from this local module instead

"lib/jquery"

]

}

});

An die Methode übergeben wir ein Array mit den Pfaden zu den Bibliotheken, die wir verwenden wollen. Dabei definieren wir den Namen der Bibliothek, über den wir später innerhalb der Programm-Logik auf die Bibliothek zugreifen können. Nutzen wir hierbei ein Array, können wir Fallback-Möglichkeiten dafür definieren. In unserem Beispiel verweisen wir zunächst auf ein Content-Delivery-Network (CDN) und geben im Falle eines fehlerhaften Aufrufs den Pfad zur lokalen Kopie der jQuery-Bibliothek an. Mit Hilfe der require()-Methode hättest du jetzt die Möglichkeit, innerhalb der main.js-Datei auf die jQuery-Bibliothek zuzugreifen.

require(["jquery"], function($) {

// Dein jQuery Code

});

In unserem Beispiel wollen wir die Arbeit aber auf ein Sub-Skript auslagern. Dazu legen wir im Unterordner „/helper“ die util.js-Datei an, ein sogenanntes Modul, das zunächst für den Gebrauch mit RequireJS definiert werden muss. Das können wir mit der define()-Methode erledigen und dabei gleichzeitig die Abhängigkeit von jQuery festlegen. Die Methode folgt dem nachfolgenden Muster:

define(

moduleName, // optional, defaults to name of file

dependencies, // optional array listing this file's dependencies

function(params) {

// Function to execute once dependencies have been loaded

// params contains return values from the dependencies

}

);

In unserem Beispiel könnte die Definition des Moduls folgendermaßen lauten:

define(["jquery"], function($) {

$('body').append("<h2>Dynamischer Inhalt auf util.js</h2>");

}

);

Um nun die util.js-Datei zu laden, kehren wir zur main.js-Datei zurück und fordern mit der require()-Methode das gerade definierte Modul an.

require(["helper/util"]);

Mit dem obenstehenden Code laden wir die Datei util.js aus dem Unterodner „/helper“. Gleichzeitig lädt RequireJS alle Bibliotheken und Skripte, die zur Ausführung von util.js benötigt werden – in unserem Fall ist das die jQuery-Bibliothek.

Unsere Basis-Implementation von RequireJS is abgeschlossen. Betrachten wir jetzt den Ladevorgang unserer Seite, so sehen wir, dass zunächst require.js und anschließend die weiteren Skripte des Projektes geladen werden – in der den Abhängigkeiten entsprechenden Reihenfolge.

Bei genauerer Betrachtung kannst du sehen, dass die zusätzlichen Skripte erst nach dem Auslösen des DOM-Events geladen werden. Das heißt, dass die zusätzlich benötigten Skripte den Render-Prozess unserer Seite nicht unnötig hinauszögern und so mit Hilfe von RequireJS neben einer Modularisierung und damit besseren Übersicht auch ein positiver Effekt auf die Performance erzielt werden kann. So können wir sicherstellen, dass auch bei größeren Projekten nur die Dateien übertragen werden müssen, die auch tatsächlich zur Ausführung benötigt werden.

Damit du dieses Experiment nicht nachbauen musst, haben wir dir das RequireJS-Beispielprojekt zum Download hinterlegt.

Mit der Technik hinter RequireJS profitiert dein Projekt von einer besseren Übersicht und erhält eine automatische Performance-Optimierung. Mit dem RequireJS-Optimizer kannst du diesen Effekt bei größeren Projekten noch besser ausnutzen: Der RequireJS-Optimizer kombiniert verwandte Skripte, minifiziert sie und führt weitere Optimierungsschritte durch, um eine noch bessere Performance zu erzielen. Der Optimizer wird dann in der Regel beim Feinschliff beziehungsweise Refactoring des Projektes mit Tools wie Grunt eingesetzt.

Mehr Informationen zum RequireJS-Optimizer findest du in der Dokumentation des Skriptloaders. Weitere Informationen und Beispiele sind auch auf der offiziellen Webseite von RequireJS zu finden. Mehr zum Thema Performance findest du in unserer Performance Serie.

Setzt ihr auf Script-Loader bei euren Projekten?