Під час об'єднання CSS або JS створюється новий файл для кожного типу сторінки

15

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

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

Кожного разу, коли ми бачили, що на кожній сторінці знову завантажується інший об'єднаний файл, навіть міститься CSS повинно перекриватися.

Як ми можемо цього уникнути та використати більше даних?

css javascript frontend

— Олексій
джерело

Алекс, ти включаєш різні файли css та js на різних сторінках? Чи є у вас посилання чи будь-яка інформація, яка підтверджує, що ця додаткова компіляція / злиття відбувається? Я побачив щось про це днями, і хотів би дізнатися більше. Нещодавно у нас виникли проблеми з тим, як наш JS збирати / об’єднувати.

— Марк Вестон

Немає публічного зв’язку. Але, наприклад, на сторінках товарів у мене є додаткові файли .cssта .jsфайли. В установці за замовчуванням Magento фактично .cssфайли майже в усьому світі однакові, тому об'єднаний файл має однаковий хеш. Але для .jsцього багато чого - тому є нещодавно комбінований файл для сторінок продуктів і для сторінок категорій тощо - завжди включаючи повну область прототипу.

— Алекс

Я шукав функцію "Об’єднати файли Javascript", щоб допомогти з перетворенням кешу. Сподіваємось, цей коментар оновлює пошукову систему та запобігає виїзду.

— Рей Фосс

14

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

Довга відповідь: Ви повинні обслуговувати лише один файл CSS для користувачів. Кілька файлів блокують візуалізацію, поки не завантажуються всі CSS. Якщо ви обслуговуєте величезну кількість CSS, вигідно відправити все це одразу, тоді веб-переглядач має кешування. Використання попереднього процесора на зразок Sass або LESS може принести цей крок у ваш процес збирання, а не дозволяти Magento робити це неефективно.

Для JS в ідеалі не слід поєднувати ці серверні сторони. Клієнтські завантажувачі сценаріїв, такі як AMD / RequireJS, є кращим вибором і допомагають управляти залежностями, чого Magento Layout XML не має. У реальному світі, хоча Magento скидає сценарії в декількох точках каси. Вам все одно краще скористатися початковим завантаженням сторінки з кількох запитів та мати окремі, але кешовані активи після цього.

Розширення Fooman Speedster Advanced - це найкраща пропозиція для інтелектуального поєднання активів без дублювання (сьогодні).

Ви дещо обмежені архітектурою Magento 1.x, яка починається з безлічі поганих практик для функціонування інтерфейсу. Змінити курс цього корабля нереально. Зробіть свій внесок у Magento 2.

— Брендан Фальковський
джерело

1

"Внесіть свій внесок у Magento 2."

— орієнтири

6

Ми використовували розширення Fogent Speedster Magento . Це прекрасне розширення, яке обробляє об'єднання файлів CSS та JS для підвищення продуктивності вашої сторінки.

Зі сторінки:

Прискоріть свій магазин, комбінуючи, стискаючи та кешуючи файли Javascript та CSS. Fooman Speedster поєднує декілька файлів Javascript та CSS в один файл Javascript та один файл CSS, щоб забезпечити швидше завантаження сторінки.

— Кенні
джерело

4

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

— Крістоф у Фомані

Я багато тестував. Він не позбавляється від усіх надмірностей, але позбавляється від деяких. І це не найкращий мініфікатор, але видалення надмірності компенсує те, що ви могли зробити самостійно зі скриптом оболонки. @KristofatFooman Якщо ви могли б скористатися системою uglifyjs --compressі краще розібратися з коментарями, ви можете отримати додаткове поліпшення приблизно на 4% менше за допомогою мого коду. я використовую uglifyjs v3 від вузла.

— Рей Фосс