Podczas scalania CSS lub JS generowany jest nowy plik dla każdego typu strony

15

Mamy wiele małych plików CSS i JS, dlatego włączenie scalania wydaje się być dobrym wyborem.

Wiele plików CSS i JS jest używanych na każdej stronie (strona główna, strona kategorii, strona szczegółów produktu).

Ilekroć widzieliśmy, że inny scalony plik jest ładowany ponownie na każdej stronie, nawet zawarty CSS musi się nakładać.

Jak możemy tego uniknąć i ponownie wykorzystać więcej danych?

css javascript frontend Alex
źródło
Alex, czy umieszczasz różne pliki css i js na różnych stronach? Czy masz link lub jakieś informacje potwierdzające, że dzieje się to dodatkowe kompilowanie / scalanie? Pewnego dnia widziałem coś na ten temat i chciałbym dowiedzieć się więcej. W ostatnim czasie mieliśmy problemy z kompilacją / scaleniem naszego JS.
Mark Weston
Nie masz publicznego linku. Ale na przykład na stronach produktów mam dodatkowe pliki .cssi .jspliki. W domyślnej instalacji Magento .csspliki są w zasadzie takie same na całym świecie, więc scalony plik ma identyczny skrót. Ale .jsto bardzo się różni - dlatego istnieje nowo połączony plik dla stron produktów i stron kategorii i tak dalej - zawsze zawierający pełną prototypową bibliotekę lib.
Alex
Szukałem funkcji „Scalaj pliki Javascript”, aby pomóc w pomijaniu pamięci podręcznej. Mam nadzieję, że ten komentarz aktualizuje wyszukiwarkę i zapobiega duplikatom.
Ray Foss,

Odpowiedzi:

14

Krótka odpowiedź: nigdy nie włączaj funkcji łączenia JS / CSS Magento. Ogólnie rzecz biorąc, gorsza jest wydajność w całym cyklu życia typowej kasy niż wysyłanie każdego zasobu osobno.

Długa odpowiedź: powinieneś podawać użytkownikom tylko jeden plik CSS. Wiele plików blokuje renderowanie do momentu pobrania całego CSS. Jeśli nie podajesz dużej ilości CSS, dobrze jest wysłać wszystko naraz, wtedy przeglądarka ma to w pamięci podręcznej. Korzystanie z preprocesora takiego jak Sass lub LESS może wprowadzić ten krok w proces kompilacji, zamiast pozwolić Magento robić to nieefektywnie.

W przypadku JS idealnie byłoby nie łączyć tych po stronie serwera. Programy ładujące skrypty po stronie klienta, takie jak AMD / RequireJS, są lepszym wyborem i pomagają zarządzać zależnościami, czego nie robi układ XML Magento. W prawdziwym świecie Magento wpada w skrypty w kilku punktach w kasie. Nadal lepiej jest wziąć początkowe trafienie strony ładowaniem wielu żądań i mieć później oddzielne, ale buforowane zasoby.

Rozszerzenie Fooman Speedster Advanced to najlepszy sposób na inteligentne łączenie zasobów bez powielania (dzisiaj).

Jesteś nieco ograniczony przez architekturę Magento 1.x, która zaczyna się od kupy złych praktyk w zakresie wydajności frontendu. Zmiana kursu tego statku nie jest realistyczna. Wnieś wkład do Magento 2.

Brendan Falkowski
źródło
1
„Wspieraj Magento 2.”
zyskuje
6

Korzystamy z rozszerzenia Fooman Speedster Magento . To wspaniałe rozszerzenie obsługuje scalanie plików CSS i JS w celu zwiększenia wydajności strony.

Ze strony:

Przyspiesz swój sklep, łącząc, kompresując i buforując pliki JavaScript i CSS. Fooman Speedster łączy wiele plików JavaScript i CSS w jeden plik Javascript i pojedynczy plik CSS, aby przyspieszyć ładowanie strony.

Kenny
źródło
4
Dzięki za wzmiankę. Chciałbym zwrócić uwagę na moje inne bezpłatne rozszerzenie Speedster (Speedster Advanced), które jest wyposażone w optymalizator motywu w celu zmniejszenia podwójnych poprawek w połączonych plikach Javascript - Zapoznaj się z moją prezentacją na konferencji programistów Ibiza 2012 tutaj magento-developers-paradise.com / wp-content / uploads /… po szczegóły.
Kristof at Fooman
Zrobiłem dużo testów. Nie pozbywa się wszystkich zwolnień, ale pozbywa się niektórych. I nie jest to najlepszy minifikator, ale usunięcie nadmiarowości kompensuje to, co można zrobić samodzielnie za pomocą skryptu powłoki. @KristofatFooman Jeśli możesz uglifyjs --compresslepiej korzystać z systemu i lepiej radzić sobie z komentarzami, możesz uzyskać dodatkową poprawę o około 4% mniejszą dzięki mojemu kodowi. używam uglifyjs v3 z węzła.
Ray Foss,