Большой размер JavaScript файлов в Magento2 — большая проблема, в этой статье мы попробуем Magento Advanced JavaScript Bundling. Рассмотрим инструменты, настройку и работоспособность.

Основная цель JavaScript-бандлинга состоит в том, чтобы уменьшить количество и размер запрашиваемых ресурсов для каждой страницы.

В дефолтной версии бандлинга на каждую страницу подгружается абсолютно весь «набор» сбандленных JavaScript файлов.



То есть, в бандлах на примере выше присутствуют JavaScript файлы чекаута, страницы категорий, продуктовой страницы и прочее, и все это грузится для каждой страницы.

Advanced JavaScript Bundling помогает решить эту задачу, а именно, сформировать бандлы по типам страниц. Например, общий бандл для JavaScript файлов, которые нужны на каждой странице, и отдельные бандлы для чекаута, категории, продуктовой страницы, CMS-страниц и пр.

Звучит красиво, но на деле не все так хорошо, как может показаться.

В официальной документации есть статья, как настроить advanced JavaScript bundling.

В ней предлагается несколько вариантов:

Ручная настройка — основана на RequireJS optimizer
Модуль Magento_Baler

Ручной режим


Первый вариант — очень сложный и трудоемкий, подразумевает ручное составление конфигурации под каждый бандл. Поддержка проекта так же очень сильно пострадает.

Для реализации требуется наличие следующих инструментов:


Пример билд-файла можно посмотреть тут.

После того, как мы проделали всю кропотливую работу по составлению билд-файла, необходимо выполнить генерацию статики:



Далее перенести содержимое статики во временных каталог:



Затем запустить r.js optimizer для файла билд-файла:



Эта команда генерирует бандлы в подкаталог bundles корневого каталога Magento:



Чтобы RequireJS использовал эти бандлы, необходимо добавить onModuleBundleComplete callback в файле build.js:



Далее, запустить команду:



Если мы откроем requirejs-config.js в pub/static/frontend/Magento/{theme}/{locale}, то увидим следующее:



Для «сжатия» бандлов мы можем можем добавить следующую конфигурацию в билд-файле:



Magento_Baler


Модуль Magento_Baler — использует схожие принципы первого метода, но добавляется автоматизация. К сожалению, в данный момент этот модуль находится в стадии раннего alpha-тестирования, не стабилен и содержит в ряд ошибок.

Так же существует ряд сторонних решений:

  1. WeareJH/config-gen
  2. magento/m2-devtools
  3. magesuite/magepack

На данный момент времени нет готового работающего инструмента для реализации этой задачи. Все примеры реализованы на базовой теме Luma, в случае полноценного интернет-магазина на Magento, который, как правило, включает в себя ряд сторонних модулей — нет никаких гарантий оптимальной работы этих модулей при advanced JavaScript bundling.