Magepack
The Magento community is full of great people who share their ideas. MegaPack was developed by Mateusz Krzeszowiak and is available on GitHub, for free, at this link: https://github.com/magesuite/magepack.
Magepack aims to make the Magento 2 frontend super-fast in a new way, and it can be compared to AC Advanced Bundling.
It’s worth noting that Magepack is not necessary for C users, but I highly recommend its use for those on Magento Open Source to enhance your website’s performance.
Our local integrated development environment is Warden-based and supports Magepack, but I always recommend installing it via the CLI. To do this, we need to run one of the following commands:
Here’s how you install Magepack with npm
:
sudo npm install -g magepack
Here’s how you install Magepack with yarn
:
sudo yarn global add magepack
You also need to install Magepack Magento module located on this page: https://github.com/magesuite/magepack-magento.
As with all Magento/AC modules, you should install it via composer
using this command:
composer require creativestyle/magesuite-magepack
Working with Magepack
The version of Magepack I only work with is 2.0.0, and I recommend only using this in Magento Open Source projects. Once you have everything installed, here is how to get it working, in few simple steps:
First, we need to create a configuration file by passing example links to a CMS page, product page, and a category page. If you are working in the Warden- based environment and have the sample data installed, you can generate the config file by running this command:
magepack generate --cms-url=https://app.packt1.test/ --category-url=https://app.packt1.test/gear/bags.html --product-url=https://app.packt1.test/strive-shoulder-pack.html
Magepack will scan those pages and generate a configuration file, called magepack.config.js
.
The content in that file has five main sections, as you can see in the following screenshot:
![Figure 14.14 – The MagePack config file, folded](https://static.packt-cdn.com/products/9781837637072/graphics/image/B19401_14_14.jpg)
Figure 14.14 – The MagePack config file, folded
If you unfold the sections, you can see a list of JS files loaded on a particular page, which can be a product page, a category page, a CMS page, or a checkout page. Common is a section that has a list of RequireJS modules loaded on all store pages. The content of the file is just a list of modules, nothing else:
module.exports = [ { name: 'common', modules: { jquery: 'jquery', 'Magento_PageCache/js/form-key-provider': 'Magento_PageCache/js/form-key-provider', underscore: 'underscore',
You don’t have to manage this file manually. You can work with the AC platform as you do, inject, and customize JS with your own modules and simply run the configuration again with a list of URLs.
The next step is enabling MagePack in the CLI:
bin/magento config:set dev/js/enable_magepack_js_bundling 1
Disable AC’s default JS bundling:
bin/magento config:set dev/js/enable_js_bundling 0
Enable a JS merge and minification:
bin/magento config:set dev/js/minify_files 1 bin/magento config:set dev/js/merge_files 1
Run production mode (to enable minification).
Run the MagePack bundle command to minimize the JS files:
magepack bundle -m
Enable all caches:
php bin/magento cache:enable
Open any page in your browser using incognito mode, and start Lighthouse to see the page score.
The result will be close to the following on the home page:
![Figure 14.15 – Page performance after configuring MagePack](https://static.packt-cdn.com/products/9781837637072/graphics/image/B19401_14_15.jpg)
Figure 14.15 – Page performance after configuring MagePack
Isn’t that nice? As you can see, we’ve achieved a much better score than default AC bundling.
While it is possible to manually adjust the magepack.config.js
file and get even better performance, it would require disabling all unused modules and some additional operations and validation. However, this result is pretty impressive, isn’t it? Google Lighthouse will show us that some of the JS is simply not used and could be removed:
![Figure 14.16 – MagePack showing unused JS](https://static.packt-cdn.com/products/9781837637072/graphics/image/B19401_14_16.jpg)
Figure 14.16 – MagePack showing unused JS
MagePack is like a magic speed booster for websites made with Magento 2, making them load super-fast in an easy, new way. I found that by using it, even with little tech knowledge, you can make your website shine in Google’s Lighthouse tests, which means your pages load faster and smoother for everyone visiting your online shop. It’s crafted by a skillful developer, Mateusz Krzeszowiak, and the good folks in the Magento community, and what’s amazing is that it’s free and quite straightforward to set up, with simple commands!