Большой размер 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-тестирования, не стабилен и содержит в ряд ошибок.
Так же существует ряд сторонних решений:
На данный момент времени нет готового работающего инструмента для реализации этой задачи. Все примеры реализованы на базовой теме Luma, в случае полноценного интернет-магазина на Magento, который, как правило, включает в себя ряд сторонних модулей — нет никаких гарантий оптимальной работы этих модулей при advanced JavaScript bundling.