Sollte ich js / css-Dateien in einer einzigen Datei kombinieren?

Sowohl die YSlow- als auch die Google Page Speed- Add-Ons empfehlen, Skript- (und Stil-) Dateien zu einer einzigen Datei zu kombinieren, um die Anzahl der HTTP-Anforderungen zu verringern. Ich kann dies durchaus erkennen, wenn die Skriptdateien auf der gesamten Website konsistent sind. aber für eine Webanwendung, die unterschiedliche Anforderungen auf der Website hat.

So wie ich das sehe, gibt es einige Möglichkeiten:

1. Kombinieren Sie alle Dateien, die auf der Website verwendet werden, und jede Seite erhält dieselbe kombinierte Datei. Der Nachteil ist, dass nicht verwendete Inhalte das Skript überladen (und ein schwereres erstes Laden (auch neu laden, wenn sich ein Komponentenskript ändert)).

2. Kombinieren Sie die Dateien pro Seite - der Nachteil ist, dass jede Seite mit unterschiedlichen Anforderungen eine andere kombinierte Datei erhält (schwereres Erstladen für jeden Seitentyp)

3. Ignorieren Sie die strikte Interpretation der Empfehlungen "nur eine Datei" und lassen Sie die Seite entsprechend in mehrere Dateien laden, wobei das Zwischenspeichern im allgemeinen Fall hoffentlich die Anzahl der HTTP-Anforderungen negiert - der Nachteil ist die Anzahl der HTTP-Anforderungen auf jeder Seite

Gedanken?

Option 2 ist die schlechteste; Dies bedeutet, dass jede Seite mit einer anderen Kombination der erforderlichen JS-Skripte zu einer HTTP-Anforderung führt. Dies wird die Leistung erheblich verschlechtern.

Option 1 ist die beste. Letztendlich werden die meisten Benutzer die meisten Seitentypen Ihrer Website besuchen. Daher ist es immer noch vorteilhaft, alles in einer einzigen Datei zu kombinieren, mit Ausnahme von großen JS-Dateien, die auf wenigen, selten besuchten Seiten benötigt werden.

Der erste Seitentreffer ist möglicherweise langsamer als bei verschiedenen Dateien, aber es lohnt sich trotzdem, da bei jedem zweiten Seitentreffer das zwischengespeicherte globale JS verwendet wird.

Ein Tipp; füge sie automatisch zusammen, wenn du es noch nicht bist!

Im Allgemeinen kombiniere ich "globales Javascript" - jQuery und allgemeine Plugins - in einer einzigen Datei und stelle dann bei Bedarf zusätzliche Plugins als separate Dateien bereit.

Zum Beispiel enthält eine Site, auf der ich viele Seiten betreibe, Datentabellen, sodass ich eine global.jsmit jQuery, DataTables und SuperFish (für mein Menü) habe. Es gibt zwei Seiten auf der Site, die einen "Leuchtkasten" verwenden, daher habe ich ein separates Skript für diese beiden Seiten.

Bei CSS stelle ich nur eine einzige Datei für die gesamte Site bereit und versuche, das CSS so allgemein wie möglich zu gestalten. Die meisten Seiten enthalten nur wenige eindeutige CSS-Elemente.

Es wird zwar auf jeden Fall empfohlen, so wenige Dateien wie möglich zu verwenden. Möglicherweise besteht jedoch eine Aufteilung zwischen Funktionen, die beim Laden der Seite erforderlich sind, und Funktionen, die durch asynchrones Laden verzögert werden können.

Wenn genug von Ihrem JS in die zweite Kategorie verschoben werden kann, können Sie die wahrgenommene anfängliche Ladegeschwindigkeit der Seite verbessern und so eine bessere Erfahrung für Ihre Benutzer schaffen.

Ich würde nicht vorschlagen, alle zu kombinieren. Wenn Sie eine gemeinsame Bibliothek verwenden, können Sie ein CDN nutzen, um Ihre Javascripts bereitzustellen. Sie können dann das Browser-Caching (vorausgesetzt, andere Websites verwenden dasselbe CDN) und die verteilte Bereitstellung nutzen. Microsoft und Google haben jeweils Lösungen (ich habe sie auch nicht ehrlich verwendet, aber ich werde mit Sicherheit anfangen) und es kann auch andere geben. In einem ähnlichen Zusammenhang hat SO diese Frage:

Wann löscht der Browser den JavaScript-Cache automatisch?

und die erste Antwort ist massives Gold.