JavaScript: Es ist besser, eine große Datei oder mehrere Lichtdateien zu haben?

  

Es ist am besten, separate Dateien zu behalten oder alle Dateien in eine Datei zu integrieren Javascript?

Um Mehrfachserveranfragen zu vermeiden, ist es besser, alle Ihre JavaScript-Dateien in nur einem zu gruppieren. Du kannst auch bundlejs verwenden (es ist in der Beta und es ist jetzt frei).

Wenn Sie C # .Net + ASP.Net verwenden, können Sie Ihr Paket bündeln Dateien - es ist eine sehr gute Möglichkeit, Ihre Skripte zu komprimieren.

  

Wie kann ich Konflikte zwischen verschiedenen Skripten vermeiden?

Sie können RequireJS verwenden; verschiedene Namen ist es auch eine gute Idee; und jedes Mal, wenn ein Plug-in / Skript beendet wird, verwenden Sie ; , um sein Ende zu bestimmen.

Performative Betrachtung

Um die Produktivität Ihrer Skripts zu erhalten, sollten Sie sie minimieren .

Lösung für eine einzelne Seite Anwendung

Nachdem Sie Ihre Skripts verkleinert haben, gruppieren Sie sie alle - unabhängig davon, ob es sich um Plugins oder Ihren eigenen Code handelt - in einer einzigen Datei und rufen Sie sie in Ihrer Anwendung auf.

Lösung für eine mehrseitige Anwendung

In diesem Fall sollten Sie für jede Seite nur das erforderliche JavaScript aufrufen. Wie können Sie das tun?

Nachdem Sie alle Ihre Skripte minimiert haben, trennen Sie sie in Kategorien . Werfen Sie einen Blick auf die Idee:

/assets/js/core.js - hier geben Sie Ihren JavaScript-Code ein, der für alle Ihre Seiten erforderlich ist. Es ist dein Kern; Dein Kernel;

/assets/js/plugins.js - Hier setzen Sie alle Plugins, die mit all Ihren Seiten laufen (d. h. jquery, backbone, knockout usw.);

/assets/js/home/bootstrap.js - Hier ist die Magie: In dieser Datei müssen Sie den Code eingeben, den Ihr Zuhause anruft;

/assets/js/contact/bootstrap.js - das gleiche wie zuvor: Diese Datei sollten Sie mit dem Code versehen, den Ihre Kontaktseite aufrufen wird.

HINWEIS: core.js und plugins.js können dieselbe Datei belegen, wenn Sie Ihre Anwendung bereitstellen. Zum besseren Verständnis und zur Entwicklung ist es gut, sie in getrennten Dateien zu speichern.

Plugins von Drittanbietern

Um Ihnen eine Idee zu geben, sollte die Datei Ihrer Plugins so aussehen:

Das Bereitstellen von einem großen Einzelserver im Vergleich zu mehreren kleinen Dateien hängt von einigen Faktoren ab:

• benötigen alle Kunden die exakt gleiche Code-Basis?
  • d. wir brauchen wahrscheinlich keine Unterlegscheibe für moderne Browser, also warum sollten wir sie bedienen?
• ändern wir diese Dateien regelmäßig?
  • Caching-Dateien, die nicht häufig geändert werden, können verwendet werden, um den Datenverkehr zu reduzieren
• wollen wir CDNs verwenden?
  • Servieren jQuery von New York nach New York, anstatt es um die Hälfte des Planeten zu schubsen, wird wahrscheinlich eine zusätzliche HTTP-Anfrage (zumindest leistungsmäßig)
  aufmortisieren

Konflikte können reduziert / eliminiert werden, indem für jedes Skript ein eigener Bereich eingeführt wird. Ein üblicher Weg besteht darin, IIFEs / SIAFs zu verwenden und erforderliche Variablen zu injizieren.

Ein schnelles und einfaches Beispiel eines IIFE:

Wenn der Inhalt in der IIFE im globalen Bereich ausgeführt würde, würde dies wahrscheinlich Ihren Polyfill zum Absturz bringen. Da es in einem lokalen (Funktions-) Bereich ausgeführt wird, sind Sie ziemlich sicher vor Konflikten.

Hinweis: Normalerweise sollte Ihr Polyfill nicht global implementiert werden.

Konflizierender Code hat nichts damit zu tun, JavaScript zu kombinieren oder in separate Dateien zu schreiben, aber es erfordert eine absteigende Programmierung.

Das Kombinieren oder Nicht-Kombinieren hängt von mehreren Dingen ab:

• Dateigröße
• wie viele Änderungen erwarten Sie?
• Wieviel relevanter Code muss auf einmal geladen werden, dass es nützlich ist lege es in eine Datei oder separate Dateien
• Eine Datei hält die Anzahl der Dateianforderungen niedrig
• ..

Generell ist es besser zu bündeln. Wenn Sie Visual Studio verwenden, können Sie die Web Essentials-Bündelung für JS, CSS und sogar Bild-Sprites verwenden.

Ссылка