JS bundling – це необхідна оптимізація, яка дає змогу покращити швидкість вашого магазину Magento, зменшуючи кількість запитів сервера до JS файлів. Пакети JS (JS bundles) в Magento утворюються шляхом об’єднання безлічі JavaScript файлів в один. Відповідно, замість того, щоб завантажувати сотні JS файлів для кожної сторінки, браузер завантажує лише кілька JS пакетів.
Але є одна річ.
За замовчуванням Magento створює величезні пакети JS файлів, кожен у середньому близько 5-10 Мб. Тож швидкість сайту насправді не покращиться, а навпаки.
У цій статті ви крок за кроком ознайомитеся з оптимізацією JS пакетів Magento за допомогою простого рішення Rocket Javascript, щоб отримати вигоду від JS бандлингу і кращої швидкості сайту.
Зміст [приховати]
Перш ніж перейти до оптимізації, давайте ще раз визначимо, що таке JS bundling у Magento 2.
Що таке Magento JS Bundling?
Magento JS bundling — це прийом, який використовується для зменшення кількості запитів сторінок шляхом об’єднання їх у пакети, бандли. Таким чином, замість того, щоб завантажувати сотні файлів JS, браузер повинен завантажити лише кілька пакетів.
Однак навіть Magento не рекомендує вам використовувати JS бандлинг через неефективність, оскільки об’єднані пакети важать близько 5-10 Мб.
Примітка: щоб використовувати JS бандлинг у Magento, ваша програма має бути в production mode, який можна задати за допомогою CLI.
Як оптимізувати Magento JS bundling?
Розширення Magento 2 Rocket Javascript дозволяє створювати пакет файлів, необхідних для кожної сторінки, і робити його розміром близько 1 Мб, щоб значно покращити швидкість порівняно зі стандартним JS пакетом.
1. Мініфікуйте JavaScript файли
Підіть у Stores > Configuration > Advanced > Developer > JS Settings та ввімкніть опцію Minify JavaScript Files.
Примітка: ця опція доступна лише в режимі девелопера.
Не забудьте очистити кеш, щоб перейти до наступного кроку.
2. Отримайте список важливих JS файлів
Проблема з JS бандлингом Magento полягає в тому, що об’єднані та завантажені файли можуть навіть не використовуватися на сторінці, на яку користувачі потрапили. Крім того, браузер завантажує всі пакети синхронно.
За допомогою Javascript Magefan Rocket ви можете створити 1 пакет з усіма важливими JS файлами. Для цього вам потрібно скласти один список JS файлів з різних сторінок.
Використовуйте наступний код:
/* Use in browser console */
globalSrc = '';
jQuery('script').each(function(){
if (!jQuery(this).attr('src')) return;
var src = jQuery(this).attr('src');
if (src.indexOf(require.toUrl('')) != -1 && src.indexOf('Magefan_LazyLoad') == -1) {
var src = (src.replace(require.toUrl(''), ''));
globalSrc += "\n" + src;
}
})
console.log(globalSrc)
Потім перейдіть на домашню сторінку свого магазину, клацніть правою кнопкою миші та виберіть Inspect. Перейдіть у Console, очистіть її, якщо потрібно, вставте наведений вище код і натисніть Enter.
Ви отримаєте список усіх JavaScript файлів, які використовуються на цій сторінці.
Отримавши список JS файлів з однієї сторінки, вставте його в один із інструментів для вибору спільних елементів, як-от Browserling. Повторіть процес на іншій сторінці та вставте список інших JS файлів в інструмент, щоб знайти спільні елементи.
Ви можете порівнювати JS файли з різних сторінок (продукту, категорії, CMS тощо), доки не виведете список загальних JS файлів.
3. Ввімкніть оптимізацію JavaScript bundling
Отримавши остаточний список JS файлів, які ви хочете об’єднати в групу, перейдіть у Stores > Configuration > Magefan Extensions > Rocket Javascript та ввімкніть опцію Enable JavaScript Bundling Optimization. Вам потрібно буде вставити список JS файлів, які ви отримали у поле Included In Bundling.
Не забудьте зберегти налаштування.
4. Ввімкніть Magento JS bundling
Нарешті, вам потрібно повернутися до Magento JS Settings (Stores > Configuration > Advanced > Developer > JS Settings), щоб увімкнути опції Enable JavaScript Bundling і Merge JavaScript Files.
Збережіть налаштування та знову ввімкніть production режим.
Оптимізація JS пакетів Magento — не єдина перевага модуля Rocket Javascript, яку ви отримуєте. За винятком ваги та кількості JS бандлів, цей модуль дозволяє оптимізувати завантаження JS файлів на сторінці.
Ви можете налаштувати розширення Rocket Javascript, щоб перемістити весь JS вниз сторінки, щоб він не впливав на завантаження сторінки, або відкладено завантажувати лише деякі JS файли.
