Beim Zusammenführen von CSS oder JS wird für jeden Seitentyp eine neue Datei generiert

15

Wir haben viele kleine CSS- und JS-Dateien und das Aktivieren des Zusammenführens scheint eine gute Wahl zu sein.

Viele der CSS- und JS-Dateien werden auf jeder Seite verwendet (Homepage, Kategorieseite, Produktdetailseite).

Wann immer wir sahen, dass auf jeder Seite eine andere zusammengeführte Datei erneut geladen wird, muss sich auch das enthaltene CSS überlappen.

Wie können wir dies vermeiden und mehr Daten wiederverwenden?

css javascript frontend

— Alex
quelle

Alex, schließen Sie verschiedene CSS- und JS-Dateien auf verschiedenen Seiten ein? Haben Sie einen Link oder eine Information, die bestätigt, dass diese zusätzliche Kompilierung / Zusammenführung stattfindet? Ich habe neulich etwas darüber gesehen und würde gerne mehr wissen. Es gab kürzlich Probleme beim Kompilieren / Zusammenführen unseres JS.

— Mark Weston

Habe keinen öffentlichen Link. Aber zum Beispiel auf Produktseiten habe ich einige zusätzliche .cssund .jsDateien. In einer Magento-Standardinstallation sind die .cssDateien praktisch global identisch, sodass die zusammengeführte Datei einen identischen Hash hat. Da .jsdies jedoch sehr unterschiedlich ist, gibt es eine neu kombinierte Datei für Produktseiten und Kategorieseiten usw., die immer die vollständige Prototyp-Bibliothek enthält.

— Alex

Ich habe nach der Funktion "Javascript-Dateien zusammenführen" gesucht, um beim Busting des Caches zu helfen. Hoffentlich aktualisiert dieser Kommentar die Suchmaschine und verhindert Dups.

— Ray Foss

14

Kurze Antwort: Aktivieren Sie niemals die JS / CSS-Zusammenführungsfunktion von Magento. Insgesamt ist die Leistung während des gesamten Lebenszyklus einer typischen Kaufabwicklung schlechter als wenn jedes Asset einzeln gesendet wird.

Lange Antwort: Sie sollten Benutzern nur eine CSS-Datei zur Verfügung stellen. Das Rendern mehrerer Dateien wird blockiert, bis das gesamte CSS heruntergeladen wurde. Sofern Sie nicht eine große Menge an CSS bereitstellen, ist es vorteilhaft, alles auf einmal zu senden, und der Browser hat es zwischengespeichert. Die Verwendung eines Pre-Prozessors wie Sass oder LESS kann diesen Schritt in Ihren Build-Prozess einbringen, anstatt Magento ineffizient arbeiten zu lassen.

Für JS sollten Sie diese Server im Idealfall nicht kombinieren. Clientseitige Skriptladeprogramme wie AMD / RequireJS sind die bessere Wahl und helfen beim Verwalten von Abhängigkeiten, was Magentos Layout-XML nicht tut. In der realen Welt wird Magento an mehreren Stellen im Checkout-Flow in Skripten abgelegt. Sie sind immer noch besser dran, wenn Sie den ersten Seitenlade-Treffer mehrerer Anfragen erzielen und anschließend separate, aber zwischengespeicherte Assets haben.

Die Fooman Speedster Advanced-Erweiterung ist die beste Wahl, um Assets intelligent zu kombinieren, ohne sie zu duplizieren (heute).

Die Magento 1.x-Architektur, die mit unzureichenden Praktiken für die Frontend-Leistung beginnt, schränkt Sie ein wenig ein. Es ist nicht realistisch, den Kurs dieses Schiffes zu ändern. Tragen Sie zu Magento 2 bei.

— Brendan Falkowski
quelle

1

"Tragen Sie zu Magento 2 bei."

— benmarks

6

Wir haben die Fooman Speedster Magento Extension verwendet . Es ist eine wunderbare Erweiterung, die das Zusammenführen von CSS- und JS-Dateien verwaltet, um die Leistung Ihrer Seite zu steigern.

Von der Seite:

Beschleunigen Sie Ihren Shop, indem Sie Javascript- und CSS-Dateien kombinieren, komprimieren und zwischenspeichern. Fooman Speedster kombiniert mehrere Javascript- und CSS-Dateien in einer einzigen Javascript- und einer einzigen CSS-Datei, um schnellere Ladezeiten für Seiten zu ermöglichen.

— Kenny
quelle

4

Danke für die Erwähnung. Ich mag meine andere freie Speed Verlängerung (Speed Advanced) , die mit einem Thema optimiser kommt darauf hin , die Doppel ups zu reduzieren in den Javascript - Dateien zusammengefasst - Bitte meine Präsentation auf der Ibiza Developer Conference 2012 hier sehen magento-developers-paradise.com / wp-content / uploads /… für Details.

— Kristof bei Fooman

Ich habe viel getestet. Es werden nicht alle Redundanzen beseitigt, aber einige. Und es ist nicht der beste Minifier, aber die Redundanzentfernung gleicht aus, was Sie mit einem Shell-Skript alleine machen können. @KristofatFooman Wenn Sie das System verwenden uglifyjs --compressund mit Kommentaren besser umgehen könnten, könnten Sie mit meinem Code eine zusätzliche Verbesserung von etwa 4% erzielen . Ich benutze uglifyjs v3 vom Knoten.

— Ray Foss