Code effektiv aufteilen

[molily]

Hallo,

ich hab einen recht "langen" Code (ca 10kb) und nicht alle Teile des Codes (also Funktionen) werden immer benötigt.

10 KB ist nicht nennenswert. Da lohnt sich eine Aufteilung kaum.

Ist die Datei schon minified und gzipped oder ist unverarbeiteter JavaScript-Code? Mit Minification (z.B. mit UglifyJS2) und GZip-Kompression lassen sich die 10 KB vielleicht auf 3-4 KB verkleinern.

Macht es Sinn, den Code in kleinere Dateien aufzuteilen, also zB ajax zeug fürs login in eine extra Datei zu packen und die dann je nach Situation mit <script src"..">... zu laden

Bei wirklich viel JavaScript (mehr als 100 KB minified+gzipped) macht es Sinn, über Lazy-Loading von JavaScript-Modulen nachzudenken. Darunter ist der HTTP-Overhead zu groß, wenn das JavaScript in mehreren einzelnen Dateien geladen werden. Somit ergibt sich kein Performance-Vorteil.

gibts eine Methode, das noch während der Laufzeit zu tun (also wie bei PHP include/require)?

Keine eingebaute. Man kann JavaScript-Dateien laden, indem man script-Elemente erzeugt und ins DOM einhängt. jQuery hat dafür die Methode getScript. Man kann das aber auch selbst in 15-20 Zeilen implementieren.

Für größere Anwendungen gibt die Modulstandards AMD und CommonJS. Entsprechende Loader sind RequireJS und Curl.

Mit r.js lassen sich aus vielen kleinen Modulen Pakete schnüren, die dann vom Client bei Bedarf geladen werden. – Das ist i.d.R. erst sinnvoll, wenn die JavaScript-Gesamtmenge mehrere 100 KB überschreitet (minified + gzipped). Es kommt natürlich auch ganz auf die Anwendung und deren Modularisierbarkeit an.

Besonders am Bespiel vom LogIn folgende Probelmatik: Das Script wird in Datei 1 nur benötigt, wenn der User noch nicht eingeloggt ist, ansonsten bräuchte es nicht geladen werden. In Datei 2 wird es gar nicht benötigt.

Diese Logik kannst du auch serverseitig in PHP programmieren. Wenn der User eingeloggt ist, wird kein script-Element ins HTML geschrieben.

Mathias