Stratus Magento 2 Guides - Using MagePack to Speed JS Delivery

To successfully utilize MagePack, a well-known JavaScript bundling tool on Webscale Stratus, please generate magepack.config.js file on your local computer by running a command.

docker run -t -i --rm nemke82/magepack-generator bash

You can use Play with Docker and run docker image directly in your browser tab to generate magepack.config.js file as well.

Run the following to generate magepack.config.js file (Replace https://mystore.com with your domain url ):

magepack generate --cms-url="https://mystore.com" --category-url="https://mystore.com/category-2/category-2-1/category-2-1-1.html" --product-url="https://mystore.com/category-2/category-2-1/category-2-1-1/simple-product-122.html"

When the file is generated, please upload the file to the docroot of your’s Magento 2 installation, login to the SSH container on Webscale STRATUS environment, and execute:

npm install -g magepack

At this point tool (magepack) and magepack.config.js file should be successfully installed.

Requirements

  • You need [Node.js version 10 or higher][3] installed.
  • If you are using Magento 2.3.5 or lower, you need to have mixins.js module patched ( patch provided and explained here: Mixins are not applied for bundled modules )
  • If you are using Magento 2.3.3 or lower, you need jquery.cookie module shim ( patch provided and explained here: Invalid shims in Magento core break core-bundle.js at runtime )
  • You need Magepack Magento) module installed. See below for installation instructions.
  • You must always use the “magepack bundle” command before “setup:static-content:deploy”. Please refer to [Deployment CI/CD scripts][8].

Note: There is no patch requirement when using Magento 2.4.x

Installing MagePack Magento module

It is recommended to install this extension using composer package manager:

composer require creativestyle/magesuite-magepack

The next step would be to trigger the actual optimization after the static content deploy stage has finished, by running the following in the Magento root directory:

magepack bundle

This command will iterate over each deployed locale (excluding Magento/blank) and prepare bundles for each of them.

Once you have made sure Magepack Magento module is installed, enable it via the Magento admin panel under Stores->Configuration->Advanced->Developer or CLI:

php bin/magento config:set dev/js/enable_magepack_js_bundling 1

and clear the caches:

php bin/magento cache:clean
php bin/magento cache:flush
redis-cli -h redis flushall && redis-cli -h redis-session -p 6380 flushall && redis-cli -h redis-config-cache -p 6381 flushall

Now the store should be way faster than before! You can (and should) even enable all Magento’s performance optimizations (except JavaScript bundling of course) for even better results.


Last modified January 1, 0001