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

11

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?

optimization css javascript Cebjyre
quelle
Du machst es falsch. Trennen Sie die Teile entweder in einzelne Dateien und nehmen Sie den Aufwärmtreffer (verursacht durch eine größere Anzahl von Anforderungen und einen kalten Cache) oder kombinieren Sie die Quelldateien auf der Serverseite programmgesteuert und stellen Sie nur 1 js, css, html-Seite pro festem Link bereit. Mischen von Dateien mit verschiedenen MIME-Typen = schlecht.
Evan Plaice
Und ... wie @ Larry Smithmier in seiner Antwort sagte, verwenden Sie ein CDN (z. B. Google), um allgemeine Bibliotheken (z. B. jquery) bereitzustellen, um die anfänglichen Kosten für die Cache-Erwärmung für diese Dateien vollständig zu vermeiden.
Evan Plaice

Antworten:

11

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!

Thomas Bonini
quelle
2
Sie müssen sich jedoch des ersten Eindrucks bewusst sein, den Ihre Homepage / Zielseiten vermitteln. Wenn die erste Seite, die ein Besucher sieht, nur langsam geladen wird, muss er möglicherweise nicht auf eine zweite Seite schauen.
Pelms
Eine andere Option, insbesondere wenn Ihre Website stark von einer Zielseite oder einem starken ersten Eindruck abhängt, besteht darin, die Größe der auf dieser ersten Seite bereitgestellten Dateien zu minimieren und dann die kombinierten Dateien auf jeder anderen Seite bereitzustellen.
Travis Northcutt
4

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.

DisgruntledGoat
quelle
1

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.

JasonBirch
quelle
1

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.

Larry Smithmier
quelle
2
Ich verwende bereits die von Google gehostete jQuery-Bibliothek, aber diese Frage bezog sich auf ortsspezifische Dateien (dh für die Stapelaustausch-Sites, wenn Sie eine Frage stellen, haben Sie das Skript, um nach ähnlichen Fragen zu suchen, das Skript zum Rendern den Markdown und die Tag-Vorschläge, die möglicherweise alle in separaten Dateien entwickelt werden sollen). Abgesehen davon, wenn Sie die von Google jQuery gehosteten js verwenden, während 1.4 und 1.4.2 (im Moment) beide den gleichen Inhalt liefern, wird 1.4.2 für ein Jahr zwischengespeichert, 1.4 jedoch nur für eine Stunde.
Cebjyre
cooler Tipp! Vielen Dank für den Einblick in die Caching-Dauer auf der gehosteten jQuery.
Larry Smithmier