MagePack – The Ultimate Guide

It’s been one week since we started using magepack on a select few magento sites and I was a bit frustrated how there seemed to be a lack of an ultimate getting started guide to it. So I hope this helps.

Magepack is an advanced javascript bundling and minification library written on node that helps speed up luma based themes.  Its not a miracle worker, but it does help.

High Level Initial Setup Overview Steps

• Install the magepack magento module to the project.

• Download docker container to your dev machine and production machines.

• Decide on three urls to have magepack scan.  A CMS Page, a Product Page, and a Category url. 

• Run the magepack generate command against these 3 urls  (This command needs to be re-ran anytime javascript is added or removed from the project)

• Add the magepack.config.js to projects version tracking (git).

• Run the magepack bundle command on every deploy (or every deploy that has javascript changes).

• Verify the magepack-bundle.js is in the view source of the page and is not a 404.

Understanding difference between MagePack generate and bundle commands

Anytime a change is made to any javascript file, the bundle command should be ran. As for our process, we have added the bundle command on every compile.

Anytime a javascript file is added/removed from the project or requirements with requirejs has changed, you need to run the generate command before running the bundle command.

Installing Magento Module to Fresh Project

The github repo is here. 

Essentially, all you need to do here is:

composer require creativestyle/magesuite-magepack
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean
php bin/magento cache:flush

And then make sure magento’s deprecated stuff is turned off:

bin/magento config:set dev/js/merge_files 0
bin/magento config:set dev/js/enable_js_bundling 0

There are a few command line switches to make note of:

Enable Magento Magepack Module (Don’t do this until you are ready at the end of this article):

bin/magento config:set dev/js/enable_magepack_js_bundling 1
bin/magento cache:clean
bin/magento cache:flush
redis-cli flushall

If you ever need to disable magepack the below commands will do:

bin/magento config:set dev/js/enable_magepack_js_bundling 0
bin/magento cache:clean
bin/magento cache:flush
redis-cli flushall

Download and configure docker container

We assume you already have podman or docker installed.  On RHEL8 flavors, yum install podman -y

I chose to build the image from the repo instead of dockerhub so I can always make sure I have the latest.

As root or user of choice:

cd ~
git clone https://github.com/udovicic/magepack-docker.git
cd magepack-docker
make build

Set up some custom aliases on dev so the docker feels more native.

echo "" >> /etc/profile.d/custom.sh
echo "alias magepack='sudo docker run --rm -u \`/usr/bin/id -u\`:\`/usr/bin/id -g\` -v \`pwd\`:/source udovicic/magepack \"magepack\$@\"'" >> /etc/profile.d/custom.sh

You will probably need to log out and back in for the above aliases to work. Note: this is for BASH on RHEL flavors. Other shells and operating systems you will need to make applicable changes.

Decide on three urls to have magepack scan

The way magepack works is that it uses a headless chrome instance to load three pages on the site and decipher what javascript requirements are needed for those pages.  It them seperates them out on a “common” file, then a “cms” bundle, “product” bundle, and “category” bundle.

So anytime we have changed javascript dependencies we need to run the magepack generate command and pass these three urls.

In choosing the pages, you should use whatever page has the most javascript on it.  For example, if you have a product page with swatches for some products, you will want to choose one of these.  If your pages are all the same from a functionality standpoint, then the javascript libraries should be the same and it shouldn’t matter.

While I am not sure if you can run magepack against a url that has already been magepack, for our use we will use staging urls where magepack is not enabled. 

Run the magepack generate command

Below is an example (urls omitted for security). 

magepack generate --skip-checkout --cms-url="" --category-url="" --product-url=""

We are skipping the checkout --skip-checkout since we have seen some issues with checkout being bundled.  (It was more that chrome couldn’t add products to the cart due to product options not being selected by default, rather than checkout issues.  Magepack tries to add the product to the cart and go through that process.)

Add the magepack.config.js to projects version tracking (git).

git add magepack.config.js
git commit -m "Adding Magepack Config JS"

Run the magepack bundle command on every deploy (or every deploy that has javascript changes).

So in a normal magento world, this means inserting the command after setup:static-content:deploy.  We pass -m to it so terser is used for minification (a super strong minifier).

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
magepack bundle -m
php bin/magento cache:clean
php bin/magento cache:flush

Here you want to make sure the magepack module is enabled.

 bin/magento config:show dev/js/enable_magepack_js_bundling

If you see a 1, it is enabled.  If you see a 0, you need to enable (see first section of article).

Verify the magepack-bundle.js is in the view source of the page and is not a 404.

Go to the live site, view source and look for bundle-common.js.  Click on it and ensure its a bunch of javascript.