Magento incluye algunas opciones nativas para el empaquetado de ficheros javascript como JS Merge o JS Bundle pensadas para reducir los tiempos de carga, pero que en muchas ocasiones, lejos de mejorar, empeoran el rendimiento.
Debido a esto se ha popularizado el uso de librerias externas como Baler o Magepack, que permiten empaquetar los ficheros JS de nuestras páginas de una forma más controlada, permitiendo llegar a mejorar considerablemente los tiempos de carga de nuestras páginas.
Magepack
Magepack se compone de un módulo de Magento y de una librería JS que permiten preparar empaquetados de ficheros javascript diferenciando los siguientes paquetes:
- Bundle Común: Agrupación de ficheros JS utilizados en todas las páginas.
- Bundle CMS: Agrupación de ficheros JS utilizados en las páginas estáticas.
- Bundle Producto: Agrupación de ficheros JS utilizados en la ficha de producto.
- Bundle Checkout: Agrupación de ficheros JS utilizados en el proceso de checkout.
- Bundle Categoría: Agrupación de ficheros JS utilizados en el listado de productos.
Con esta estrategia de empaquetado pueden obtenerse mejoras considerables en los tiempos de carga y, por tanto, en la puntuación asignada por plataformas como Google Insights:
Cómo instalar Magepack en tu Magento
Instalar Magepack es moderadamente sencillo cumpliendo los siguientes requisitos:
- Magento > v2.3.5 (Recomendado)
- NodeJS ≥ v10
En caso de tener una versión inferior de Magento, se recomienda revisar las notas incluidas en el propio repositorio oficial de Magepack.
1. Instalar y activar el módulo Magepack para Magento:
composer require creativestyle/magesuite-magepack
php bin/magento setup:upgrade2. Instalar la librería JS de Magepack:
npm install -g magepack3. Generar fichero de configuración de Magepack:
En este paso, la librería de Magepack accederá a las URLs indicadas para analizar los ficheros JS que deberán ser incluidos en cada paquete, dando como resultado un fichero de configuración magepack.config.js.
magepack generate --cms-url="{{CMS_PAGE_URL}}" --category-url="{{CATEGORY_PAGE_URL}}" --product-url="{{PRODUCT_PAGE_URL}}"4. Generar ficheros bundle:
En este paso, Magepack utilizará el fichero de configuración generado en el paso anterior para crear los ficheros JS empaquetados. Es muy importante lanzar este paso después de la generación de ficheros estáticos.
magepack bundleOptimizaciones recomendadas
Se recomienda aplicar las siguientes opciones de optimización en Magento:
bin/magento config:set dev/js/merge_files 1
bin/magento config:set dev/js/enable_js_bundling 0
bin/magento config:set dev/js/minify_files 1
bin/magento config:set dev/js/move_script_to_bottom 1
bin/magento config:set dev/js/enable_magepack_js_bundling 1
bin/magento config:set dev/css/merge_css_files 1
bin/magento config:set dev/css/minify_files 1Despliegues con Magepack
Es importante destacar que, para que las optimizaciones de Magepack se mantengan tras cada despliegue de Magento, necesitaremos añadir el fichero de configuración magepack.config.js a nuestro repositorio (o regenerarlo en cada despliegue), así como asegurarnos de lanzar el comando “magepack bundle” tras el proceso de despliegue de estáticos.
Cómo instalar Magepack en Magento Cloud
Para aplicar la lógica del empaquetado de Magepack a un entorno Magento Cloud serán necesarios los siguientes pasos, que permitirán que cada vez que se realice un despliegue en el entorno cloud, se generen los paquetes JS utilizando la herramienta Magepack.
1. Añadir el fichero de configuración magepack.config.js al repositorio.
Por limitaciones del entorno, no es posible lanzar el comando “magepack generate”, por lo que deberemos subir el fichero de configuración ya generado.
2. Modificar el fichero .magento.app.yaml (build):
Por defecto, el entorno Magento Cloud cuenta con una versión de NodeJS/NPM no compatible con Magepack, por lo que deberemos actualizarla antes de instalar la librería Magepack. Para ello se deben añadir los siguientes comandos al comienzo del “build hook”:
build: |
unset NPM_CONFIG_PREFIX && { curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | dash ; } && export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && nvm current && nvm install --lts=dubnium
npm install -g magepack
[...]3. Modificar el fichero .magento.app.yaml (post_deploy):
Una vez desplegados los ficheros estáticos, se deberá lanzar la librería Magepack para realizar el empaquetado de ficheros JS. Para ello, se debe añadir el siguiente comando al comienzo del “post_deploy hook” que utilizará la versión de NodeJS instalada en el paso anterior para lanzar Magepack:
post_deploy: |
[ -e "./magepack.config.js" ] && .nvm/versions/node/*/bin/node .nvm/versions/node/*/bin/magepack bundle
[...]Update Magento Cloud [Septiembre/2021]
Debido a cambios en el proceso de despliegue de los entornos de Magento Cloud, a partir de la versión 2002.1.6 de ece-tools, todo el proceso de instalación y ejecución del Magepack bundling deberá realizarse en la fase de “build”, mientras que la fase de “post_deploy” podrá mantenerse con la configuración por defecto de Magento Cloud.
La configuración resultante del “build hook” en el fichero .magento.app.yaml será la siguiente:
build: |
set -e
unset NPM_CONFIG_PREFIX && { curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | dash ; } && export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && nvm current && nvm install --lts=dubnium && npm install -g magepack
php ./vendor/bin/ece-tools run scenario/build/generate.xml
[ -e "./magepack.config.js" ] && .nvm/versions/node/*/bin/node .nvm/versions/node/*/bin/magepack bundle
php ./vendor/bin/ece-tools run scenario/build/transfer.xmlPosibles problemas con Magepack
Magepack es una herramienta que utiliza la librería Puppeteer, que a su vez hace uso del navegador Chromium. Esto puede llevar a errores si no contamos con las dependencias necesarias para lanzar este navegador. En este caso, se recomienda la instalación de las siguientes dependencias en el entorno donde lo vayamos a utilizar:
apt-get install -y gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
