Wann sollte Requirejs und wann gebündeltes Javascript verwendet werden?

74

Dies kann eine dumme Frage für Web-Leute sein. Aber ich bin etwas verwirrt darüber. Jetzt habe ich eine Anwendung, in der ich einige Javascript-Dateien verwende, um verschiedene Aufgaben auszuführen. Nun, ich bin mit Javascript Bündler zu kombinieren und alle Dateien minify. Zur Laufzeit gibt es also nur eine app.min.js-Datei. Jetzt wird Requirejs verwendet, um Module oder Dateien zur Laufzeit zu laden. Die Frage ist also, wenn ich bereits alle Dinge in einer Datei habe, brauche ich dann requirejs? Oder was ist ein Anwendungsszenario, in dem ich requirejs und / oder bundler verwenden kann?

Bitte lassen Sie mich wissen, wenn weitere Details benötigt werden.

javascript requirejs servicestack Kunjee
quelle
1
Ich verstehe nicht, warum Sie beides brauchen würden. Glaubst du , du würdest?
nnnnnn
2
Das ist eine Verwirrung. Wann was verwenden? Oder müssen Sie nur eine auswählen?
Kunjee
Erfordert Require nicht neben dem verzögerten Laden von Javaskripten auch eine Abhängigkeitsinjektion, damit der Bedarf an globalen Daten beseitigt wird? Mir scheint, dass Require in einer gebündelten Datei immer noch nützlich ist. Liege ich falsch?
Papiro

Antworten:

28

Dies ist ein heiß umkämpftes Problem unter vielen erfahrenen Javascript-Entwicklern. Viele andere Sprachen haben eine "Kompilierungs" -Phase, in der das gesamte Programm für die Bereitstellung gebündelt wird (JBoss '.WAR-Dateien fallen mir ein). Programmierer mit traditionelleren Hintergründen bevorzugen diesen Ansatz häufig.

Javascript hat in den letzten Jahren ein derartiges Wachstum verzeichnet, dass es schwierig ist, genaue Best Practices zu ermitteln. Diejenigen, die die funktionalere Natur von Javascript zu schätzen wissen, bevorzugen jedoch häufig den Ansatz zum Laden von Modulen (wie bei require.js verwendet).

Ich habe Frame.js geschrieben, das ähnlich wie require.js funktioniert, daher tendiere ich zum Modul-Loader-Ansatz.

Um Ihre Frage direkt zu beantworten, ja, es ist das eine oder andere.

Die meisten, die dafür argumentieren, Ihre Skripte in eine einzige Datei zu packen, glauben, dass dies mehr Komprimierung ermöglicht und somit effizienter ist. Ich glaube, die Effizienzvorteile des Verpackens sind in den meisten Fällen vernachlässigbar, weil: (1) die Ladezeiten der Module über die gesamte Sitzung verteilt sind, (2) einzelne Module auf nahezu den gleichen Prozentsatz komprimiert werden können, (3) einzelne Module zwischengespeichert werden können Der Server und die Router getrennt, und (4) das Laden von Skripten nur dann, wenn sie benötigt werden, ermöglicht es Ihnen letztendlich, für einige Benutzer weniger Code und insgesamt mehr Code zu laden.

Wenn Sie auf lange Sicht einen Vorteil beim dynamischen Laden von Skripten sehen, verwenden Sie ihn. Wenn nicht, bündeln Sie Ihre Skripte in einer einzigen Datei.

BishopZ
quelle
6
Ich verstehe zwar die Vorteile einer getrennten Aufbewahrung der Dateien, denke aber, dass durch die Bündelung auch die Anzahl der erforderlichen http-Verbindungen verringert wird. Da Pipelining in Browsern und Servern immer häufiger verfügbar ist, ist dies möglicherweise weniger wichtig, aber es ist derzeit eine ziemlich große Sache.
Andrew Theken
5
Der HTTP-Verbindungsaufwand kann schnell bereitgestellt werden, wenn die App groß ist. Wenn wir unsere App im entpackten Modus ausführen und jede JS-Datei einzeln laden, dauert das Laden der Seite ungefähr 15 bis 30 Sekunden. Im gepackten Modus dauert es ungefähr eine Sekunde.
Matt Greer
Eine einzelne gepackte, zwischengespeicherte Datei ist offensichtlich viel schneller als das Abrufen von Dutzenden oder Hunderten von Dateien, von denen Sie nie wirklich sicher sein können, dass sie geladen wurden oder wie lange das Laden dauert. Es ist daher besser, alles auf dem Client abzulegen. In den meisten Fällen wird diese einzelne Datei ohnehin nicht die Größe von 1 MB überschreiten, wahrscheinlich viel weniger, nachdem sie minimiert und komprimiert wurde. Also, Single-File-FTW.
vsync
Tausende stark typisierte Klassen und eine SWF-Datei, ftw.
Triynko
48

Im Allgemeinen verwenden Sie RequireJS nur während der Entwicklung in seiner Ladeform. Sobald die Site fertig und bereit für die Bereitstellung ist, minimieren Sie den Code. Der Vorteil hierbei ist, dass RequireJS genau weiß, was Ihre Abhängigkeiten sind, und daher den Code leicht in der richtigen Reihenfolge minimieren kann. Folgendes steht auf der RequireJS-Website :

Wenn Sie mit der Entwicklung fertig sind und Ihren Code für Ihre Endbenutzer bereitstellen möchten, können Sie den Optimierer verwenden, um die JavaScript-Dateien miteinander zu kombinieren und zu minimieren. Im obigen Beispiel können main.js und helper / util.js in einer Datei kombiniert und das Ergebnis minimiert werden.

Matt Greer
quelle
4
Ich weiß, dass dies ein alter Thread ist, aber ich bin darüber gestolpert, weil ich ähnliche Zweifel hatte. Also, eine Folgefrage, wenn Sie nichts dagegen haben - wenn wir endlich alles für die Bereitstellung in einer Datei bündeln, wird meine gesamte Anwendung auf einmal anstatt stückweise (auf Anfrage) geladen. Ist das nicht ein Widerspruch zu AMD?
Code Poet
5
Ja, in gewissem Sinne. AMD ist jedoch theoretischer, wenn es bei Bedarf auch um reale Leistungsprobleme geht. Das Laden jedes Moduls einzeln ist definitiv sauberer und reiner, wird aber ewig dauern :)
Matt Greer
1
Ich habe diese Frage auch an SO gestellt, siehe stackoverflow.com/questions/20515679/… . Vielleicht ein Mittelpunkt zwischen den beiden Ansätzen?
Code Poet
11

Das hängt von Ihrer Bewerbung ab. Wenn Sie eine serverseitige App mit nur bescheidenem Javascript (weniger als 100 KB minimiert) erstellen, dann entscheiden Sie sich wahrscheinlich für eine vollständige Bündelung.

Aber wenn Sie eine Javascript-App erstellen und eine Menge Code darin haben, werden Ihre Anforderungen anders sein.

Zum Beispiel bündle ich in meiner App alle Kerndateien. Es gibt jQuery, Unterstrich, Backbone, meine Haupt-App-Dateien, mein Benutzer-Anmeldesystem, mein Layout-System, meine Benachrichtigungen und mein Chat-System. Alle sind Teil meiner großen Anfangsdatei.

Aber ich habe auch viele andere Module, die nicht Teil des ursprünglichen Bundles sind und danach geladen werden.

Die Foren, das Wiki, das Wysiwyg, der Farbwähler, Drag & Drop, der Kalender und einige Animationsdateien gehören zur zweiten Kategorie. Sie müssen vernünftige Entscheidungen darüber treffen, was häufig verwendet und sofort benötigt wird und was verzögert werden kann.

Wenn ich alles sofort einbinde, kann ich über eine Meg von Javascript hinausgehen, was verrückt wäre und den anfänglichen Start inakzeptabel langsam machen würde.

Die zweite Kategorie wird heruntergeladen, nachdem ein initSuccessEreignis aus der ursprünglichen Datei ausgelöst wurde.

Die zweite Kategorie ist jedoch intelligenter als die erste, da sie das lädt, was zuerst wichtiger ist. Wenn Sie sich beispielsweise das Wiki ansehen, wird das Wiki geladen, bevor der Farbwähler geladen wird.

Harry
quelle