How to add Magepack Bundling in Adobe Commerce Cloud?

In the world of Ecommerce, website optimization, page load speed, and performance are the most important causes of concern. In Magento, We have Advanced Javascript Bundling to the rescue.

Advanced Javascript Bundling enhances page load speed and performance by minimizing the number of server requests and the bundle size required to load each page in the front end.

Here, We will discuss the Magepack, an Open Source Advanced Javascript Bundling Tool to improve the performance and page load speed.

Requirements

To install Magepack (https://github.com/magesuite/magepack), We need

• Node.js
• Magepack Magento Module

In the Adobe Commerce Cloud Instance, We need to follow the below steps to install Magepack.

Steps to Install Magepack in Adobe Commerce Cloud

STEP 1:  Add the “magepack bundle” command and its dependencies to the build phase of the “.magento.app.yaml” file as provided below,

hooks:
   # We run build hooks before your application has been packaged.
  build: |
   set -e
   composer install
   unset NPM_CONFIG_PREFIX
   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash
   export NVM_DIR="$HOME/.nvm"
   [ -s "$NVM_DIR/nvm.sh"  ] && \. "$NVM_DIR/nvm.sh"
   nvm install --lts=erbium
   npm install -g magepack
   php ./vendor/bin/ece-tools run scenario/build/generate.xml
   magepack bundle
   php ./vendor/bin/ece-tools run scenario/build/transfer.xml

STEP 2: To run the magepack bundle command on the build phase, we should run the static content deployment before it. 

Magento has a Deploy Strategy “Setting the SCD on build”. 

To do the same, add the following code in .magento.env.yaml file

# To generate SCD on build
stage:
  global:
	SKIP_HTML_MINIFICATION: true
  build:
	SKIP_SCD: false
	SCD_STRATEGY: "compact"

STEP 3:  Create a system-specific configuration file (config.php). 

a) To generate the file,  Use the SSH command below.

ssh <SSH-URL> "<Command>"

For example, To run the dump in the integration branch

ssh <project-id-integration>@ssh.us.magentosite.cloud "php vendor/bin/ece-tools config:dump"

b) Transfer the config.php file to the local system using the rsync command below.

rsync <SSH-URL>:app/etc/config.php ./app/etc/config.php

STEP 4: Run the magepack generate command from local env. This will generate a magepack.config.js  file in the local env.

magepack generate --cms-url="https://my-store-url/" 
--category-url="https://my-store-url/category-url/" 
--product-url="https://my-store-url/product-url"

There are 3 required options you need to pass:

–cms-url – URL to one of the CMS pages of your store (e.g. homepage).

–category-url – URL to one of the category pages.

–product-url – URL to one of the product pages.

STEP 5: Commit the below four files on git and deploy it to the cloud server,

.magento.app.yaml

.magento.env.yaml

app/etc/config.php

magepack.config.js

Reference links:

SCD on Build: https://devdocs.magento.com/cloud/deploy/static-content-deployment.html#setting-the-scd-on-build

Generate a config.php file

https://devdocs.magento.com/cloud/project/project-upgrade.html#create-a-new-configphp-file

Conclusion

Incorporating Magepack bundling into Adobe Commerce Cloud is a strategic move for optimizing your ecommerce website’s performance. 

By effectively bundling and minimizing your JavaScript files, you can significantly enhance your website’s loading speed and improve the overall user experience. 

This advanced technique can lead to higher customer satisfaction, increased conversion rates, and a more successful online store. So, don’t hesitate to explore the benefits of Magepack bundling and take your Adobe Commerce Cloud-based ecommerce site to the next level.