При объединении CSS или JS для каждого типа страницы создается новый файл.

15

У нас есть много небольших файлов CSS и JS, и включение слияния кажется хорошим выбором.

Многие файлы CSS и JS используются на каждой странице (домашняя страница, страница категории, страница сведений о продукте).

Всякий раз, когда мы видим, что другой объединенный файл загружается снова на каждой странице, даже содержащийся CSS должен перекрываться.

Как мы можем избежать этого и повторно использовать больше данных?

css javascript frontend

— Alex
источник

Алекс, вы включаете разные CSS и JS файлы на разных страницах? У вас есть ссылка или какая-либо информация, подтверждающая, что эта дополнительная компиляция / слияние происходит? Я видел что-то об этом на днях, и я хотел бы знать больше. У нас недавно были проблемы с компиляцией / слиянием нашего JS.

— Марк Уэстон

Нет публичной ссылки. Но например на страницах товара у меня есть некоторые дополнительные .cssи .jsфайлы. При установке по умолчанию в Magento .cssфайлы практически одинаковы, поэтому объединенный файл имеет идентичный хеш. Но .jsэто сильно отличается - поэтому есть новый объединенный файл для страниц продукта, для страниц категорий и т. Д. - всегда включающий полный прототип lib.

— Алекс

Я искал функцию «Объединить файлы Javascript», чтобы помочь с очисткой кэша. Надеемся, что этот комментарий обновляет поисковую систему и предотвращает дублирование.

— Рэй Фосс

14

Краткий ответ: никогда не включайте функцию объединения JS / CSS в Magento. В целом это ухудшает производительность на протяжении всего жизненного цикла обычной проверки, чем отправка каждого актива в отдельности.

Длинный ответ: Вы должны обслуживать только один файл CSS для пользователей. Несколько файлов блокируют рендеринг, пока весь CSS не будет загружен. Если вы не используете огромное количество CSS, выгодно отправлять все сразу, тогда браузер кэширует его. Использование препроцессора, такого как Sass или LESS, может внести этот шаг в процесс сборки вместо того, чтобы позволить Magento делать это неэффективно.

Для JS в идеале вы не должны объединять эти стороны сервера. Загрузчики скриптов на стороне клиента, такие как AMD / RequireJS, являются лучшим выбором и помогают управлять зависимостями, чего нет в Layen XML для Magento. В реальном мире, хотя Magento включает сценарии в нескольких точках оформления заказа. Вам все же лучше принять начальную загрузку страницы несколькими запросами и впоследствии иметь отдельные, но кэшированные ресурсы.

Расширение Fooman Speedster Advanced - ваш лучший выбор для интеллектуального объединения активов без дублирования (сегодня).

Вы несколько ограничены архитектурой Magento 1.x, которая начинается с кучи плохих практик для производительности внешнего интерфейса. Нереально изменить курс этого корабля. Поспособствуйте Magento 2.

— Брендан Фальковски
источник

1

«Внести в Magento 2».

— отметки

6

Мы использовали расширение Fooman Speedster Magento . Это замечательное расширение, которое обрабатывает слияние файлов CSS и JS, чтобы повысить производительность вашей страницы.

Со страницы:

Ускорьте свой магазин, комбинируя, сжимая и кэшируя файлы Javascript и CSS. Fooman Speedster объединяет несколько файлов Javascript и CSS в один файл Javascript и один файл CSS для ускорения загрузки страниц.

— Kenny
источник

4

Спасибо за упоминание. Я хотел бы указать на мое другое бесплатное расширение Speedster (Speedster Advanced), которое поставляется с оптимизатором тем, чтобы уменьшить удвоения в объединенных файлах Javascript - пожалуйста, посмотрите мою презентацию на конференции разработчиков Ibiza 2012 здесь magento-developers-paradise.com / wp-content / uploads /… для деталей.

— Кристоф на Fooman

Я сделал много испытаний. Он не избавляет от всех избыточностей, но избавляет от некоторых. И это не лучший ограничитель, но удаление избыточности компенсирует то, что вы могли бы сделать самостоятельно с помощью сценария оболочки. @KristofatFooman Если бы вы могли использовать систему uglifyjs --compressи лучше справляться с комментариями, вы могли бы получить дополнительное улучшение на 4% меньше с моим кодом. Я использую uglifyjs v3 с узла.

— Рэй Фосс