JS-пакетування – це обов’язкова оптимізація, яка дозволяє вам пришвидшіть роботу вашого магазину Magento зменшити кількість запитів сервера на JS-файли. JS-пакети Magento формуються шляхом об’єднання кількох JavaScript-файлів в один. Відповідно, замість завантаження сотень JS-файлів для кожної сторінки, браузер завантажує лише кілька JS-пакетів.
Але є одне але.
За замовчуванням Magento створює величезні JS-пакетні файли, кожен в середньому розміром близько 5-10 Мб. У зв’язку з цим швидкість веб-сайту насправді не покращиться, а навпаки.
У цій статті ви крок за кроком розглянете оптимізацію JS-пакетів Magento за допомогою простого рішення, щоб ви могли скористатися перевагами JS-пакетування та покращити швидкість веб-сайту.
Перш ніж перейти до оптимізації, давайте ще раз визначимо, що таке JS-пакетування в Magento 2.
Що таке Magento JS-пакетування?
Magento JS-пакетування – це техніка, яка використовується для зменшення кількості запитів сторінок шляхом їх об’єднання в пакети. Таким чином, замість завантаження сотень JS-файлів, браузеру доводиться завантажувати лише кілька пакетів.
Однак, навіть Magento не рекомендує використовувати JS-пакетування через неефективність, оскільки об’єднані пакети мають розмір близько 5-10 Мб.
Примітка: щоб використовувати JS-пакетування в Magento, ваша програма повинна бути в режим виробництва , яку можна налаштувати за допомогою CLI.
Як оптимізувати Magento JS-пакетування?
Розширення Модуль Magento 2 Rocket JavaScript дозволяє створювати пакет файлів, необхідних для кожної сторінки, та робити його розміром близько 1 Мб, що значно покращує швидкість порівняно зі стандартним пакетуванням JS.
1. Мінімізуйте файли JavaScript
Перейдіть до Сховища > Конфігурація > Додатково > Розробник > Налаштування JS та увімкніть опцію Мінімізувати файли JavaScript.
Примітка: ця опція доступна лише у режим розробника .
Не забудьте очистити кеш-сховище, щоб перейти до наступного кроку.
2. Отримайте список важливих JS-файлів
Проблема з об’єднанням Magento JS полягає в тому, що об’єднані та завантажені файли можуть навіть не використовуватися на сторінці, на яку потрапляють користувачі. Крім того, браузер завантажує всі пакети синхронно.
За допомогою Magefan Rocket Javascript ви можете створити 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)
Потім перейдіть на головну сторінку вашого магазину, клацніть правою кнопкою миші та виберіть Перевірити. Перейдіть до Консоль, очистіть її, якщо потрібно, вставте наведений вище код і натисніть Введіть.
Ви отримаєте список усіх файлів JavaScript, що використовуються на цій сторінці.
Після того, як ви отримаєте список JS-файлів з однієї сторінки, вставте його в деякі інструменти перетину списків, такі як Browserling. Повторіть процес на іншій сторінці та вставте список інших JS-файлів в інструмент, щоб знайти спільні елементи.
Ви можете порівнювати JS-файли з різних сторінок (продукт, категорія, CMS тощо), доки не знайдете список спільних JS-файлів.
3. Увімкніть оптимізацію пакетування JavaScript
Після того, як ви отримаєте остаточний список JS-файлів, які потрібно об’єднати в пакет, перейдіть до розділу Магазини > Конфігурація > Розширення Magefan > Rocket Javascript та Увімкніть Оптимізацію пакетування JavaScript. Вам потрібно буде вставити список JS-файлів у поле Включено в пакетування .
Не забудьте Зберегти конфігурацію.
4. Увімкнути пакетування Magento JS
Нарешті, вам потрібно повернутися до Налаштувань Magento JS (Сховища > Конфігурація > Додатково > Розробник > Налаштування JS), щоб Увімкнути пакетування JavaScript та Об'єднати файли JavaScript.
Зберегти конфігурацію та увімкнути продакшн-режим назад.
Оптимізація пакетування Magento JS — це не єдина перевага модуля Rocket Javascript, який ви отримуєте. Окрім ваги та кількості пакетів JS, він дозволяє оптимізувати завантаження JS-файлів на сторінці.
Ви можете налаштувати розширення Rocket Javascript перемістити весь JS вниз, щоб він не впливав на завантаження сторінки, або відкласти завантаження деяких файлів Javascript .
