2012-09-02 23 views
74

Dies kann eine dumme Frage für Web-Jungs sein. Aber ich bin ein wenig verwirrt darüber. Jetzt habe ich eine Anwendung, in der ich einige Javascript-Dateien verwende, um verschiedene Aufgaben auszuführen. Jetzt verwende ich Javascript bundler, um alle Dateien zu kombinieren und zu minimieren. Zur Laufzeit wird es also nur eine app.min.js-Datei geben. Jetzt wird Requirejs verwendet, um Module oder Dateien zur Laufzeit zu laden. Also, die Frage ist, ob ich schon alle Dinge in einer Datei habe, brauche ich requirejs? Oder was ist ein Anwendungsfall-Szenario, in dem ich Requirejs und/oder Bundler verwenden kann?Wann Requirejs zu verwenden und gebündeltes JavaScript zu verwenden?

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

+1

Ich sehe nicht, warum Sie beide benötigen würden. Glaubst du, du würdest es tun? – nnnnnn

+2

Das ist eine Verwirrung. Wann soll was genutzt werden? Oder müssen Sie nur einen auswählen? – kunjee

Antwort

27

Dies ist ein heiß umkämpftes Thema unter vielen fähigen JavaScript-Entwicklern. Viele andere Sprachen haben eine "Kompilierungsphase", in der das gesamte Programm zur Bereitstellung gebündelt wird (JBoss .WAR-Dateien kommen mir in den Sinn). Programmierer mit eher traditionellem Hintergrund bevorzugen häufig diesen Ansatz.

Javascript hat solch ein Wachstum in den letzten Jahren gesehen, dass es schwierig ist, exakte Best Practices zu zeichnen, aber diejenigen, die die funktionale Art von Javascript zu schätzen wissen, bevorzugen den Modulladeansatz (wie require.js).

Ich schrieb Frame.js, die viel wie require.js funktioniert, so ist meine Voreingenommenheit gegenüber dem Modul Loader-Ansatz.

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

Die meisten, die für das Packen Ihrer Skripte in eine einzige Datei argumentieren, glauben, dass es mehr Komprimierung ermöglicht und somit effizienter ist. Ich glaube, dass die Effizienzvorteile von Verpackungen in den meisten Fällen vernachlässigbar sind, weil: (1) Modulladezeiten über die gesamte Sitzung verteilt sind, (2) einzelne Module zu fast demselben Prozentsatz komprimiert werden können, (3) einzelne Module zwischengespeichert werden können der Server und die Router getrennt, und (4) das Laden von Skripts nur dann, wenn sie benötigt werden, ermöglicht schließlich das Laden von weniger Code für einige Benutzer und insgesamt mehr Code.

Wenn Sie auf lange Sicht einen Vorteil beim Laden dynamischer Skripts sehen können, verwenden Sie es. Wenn nicht, bündeln Sie Ihre Skripte in einer einzigen Datei.

+5

Während ich die Vorteile der separaten Aufbewahrung der Dateien verstehe, denke ich, dass die Bündelung auch die Anzahl der erforderlichen http-Verbindungen reduziert. Da Pipelining in Browsern und Servern allgemein verfügbarer wird, ist dies vielleicht weniger wichtig, aber es ist derzeit eine ziemlich große Sache. –

+4

Der HTTP-Verbindungsoverhead 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 es ungefähr 15-30 Sekunden, um die Seite zu laden. Im gepackten Modus ist es ungefähr eine Sekunde. –

+0

eine einzelne gepackte, gecachete Datei ist natürlich viel schneller als Dutzende oder Hunderte von Dateien zu holen, die Sie nie wirklich sicher geladen werden können, oder wie lange dauert es, sie zu laden. Es ist daher besser, alles auf dem Client zu löschen. In den meisten Fällen wird diese einzelne Datei die 1-MB-Größe sowieso nicht überschreiten, wahrscheinlich viel weniger, nachdem sie minimiert und gezippt wurde. Also, Single-File-FTW. – vsync

46

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

Sobald Sie die Entwicklung fertig zu tun und wollen Sie den Code für die Endbenutzer bereitstellen, können Sie den Optimierer verwenden die JavaScript-Dateien zusammen und minify es zu kombinieren. Im obigen Beispiel kann es main.js und helper/util.js in einer Datei kombinieren und das Ergebnis minimieren.

+4

Ich weiß, das ist ein alter Faden, aber ich bin gestolpert, weil ich ähnliche Zweifel hatte. Also, eine Follow-up-Frage, wenn Sie nichts dagegen haben - wenn wir schließlich alles für die Bereitstellung in eine Datei bündeln, dann lädt meine ganze Anwendung in einem Schuss statt stückweise (auf Anfrage). Ist das nicht AMD widersprüchlich? –

+5

Ja, es ist in gewissem Sinne. Aber AMD ist eher theoretisch, wo es sich auch auf reale Leistungsprobleme bezieht. Laden jedes Modul einzeln ist definitiv sauberer und reiner, aber wird ewig dauern :) –

+1

Ich stelle diese Frage auch an SO siehe http://stackoverflow.com/questions/20515679/requirejs-to-bundle-or-not-to- Bündel/20518314? Noredirekt = 1 # 20518314. Vielleicht eine Mitte zwischen den beiden Ansätzen? –

11

Es hängt von Ihrer Anwendung ab. Wenn Sie eine serverseitige App mit nur bescheidenen Javascript (weniger als 100kb minified) machen, dann gehen Sie für die gesamte Bündelung, Sie werden wahrscheinlich in Ordnung sein.

Aber wenn Sie eine Javascript-App machen und eine Tonne Code drin haben, dann werden Ihre Bedürfnisse anders sein.

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

Aber ich habe auch viele andere Module, die nicht Teil des ursprünglichen Pakets sind, die nach denen geladen werden.

Die Foren, das Wiki, die Wysiwyg, Farbauswahl, Drag/Drop, Kalender und einige Animationsdateien sind Teil der zweiten Kategorie. Sie müssen vernünftige Entscheidungen darüber treffen, was üblicherweise verwendet wird und sofort benötigt wird, was verzögert werden kann.

Wenn ich alles sofort einschließe, kann ich über einem meg Javascript, was verrückt wäre und den initialen Start inakzeptabel langsam machen.

Die zweite Kategorie beginnt mit dem Herunterladen, nachdem das Ereignis initSuccess von der ursprünglichen Datei ausgelöst wurde.

Aber die zweite Kategorie ist intelligenter als die erste, in der es lädt, was zuerst wichtiger ist. Zum Beispiel, wenn Sie auf das Wiki schauen, wird es das Wiki laden, bevor es den Farbwähler lädt.

Verwandte Themen