Magento 2 JS Bundle Optimization Guide

JS bundling is a required optimization that allows you to speed up your Magento store by reducing the number of server requests for JS files. Magento JS bundles are formed by merging multiple JavaScript files into one file. Correspondingly, instead of downloading hundreds of JS files for each page, the browser downloads just a few JS bundles. 

But there is one thing.

By default Magento creates huge JS bundle files, each around 5-10 Mb on average. Regarding this, website speed won't actually improve, but quite the opposite.

In this article, you'll go through Magento JS bundle optimization step-by-step with an easy Rocket Javascript solution so you can benefit from JS bundling and better website speed.

Before we jump to the optimization let's define once more what is JS bundling in Magento 2.

What is Magento JS Bundling?

Magento JS bundling is a technique used to reduce the number of page requests by combining them in bundles. This way, instead of loading hundreds of JS files, the browser has to load only a few bundles. 

However, even Magento doesn't recommend you to use JS bundling because of inefficiency since merged bundles are around 5-10 Mb.

How to Optimize Magento JS Bundling?

Magento 2 Rocket Javascript extension allows you to create a bundle of files required for each page and make it around 1 Mb to improve the speed significantly, compared to default JS bundling. 

1. Minify JavaScript files

Navigate to Stores > Configuration > Advanced > Developer > JS Settings and enable the option to Minify JavaScript Files.  

Don't forget to clean cache storage to move on to the next step.  

2. Get a list of vital JS files

The issue with Magento JS bundling is the files merged and loaded might not even be used on a page users land on. Besides, the browser loads all of the bundles synchronously. 

With the Magefan Rocket Javascript, you can create 1 bundle with all of the important JS files. For that, you need to compile one list of JS files from different pages.

Use the following code: 

/* Use in browser console */
globalSrc = '';
jQuery('script').each(function(){
if (!jQuery(this).attr('src')) return;
var src = jQuery(this).attr('src');
if (src.indexOf(require.toUrl('')) != -1 && src.indexOf('Magefan_LazyLoad') == -1) {
var src = (src.replace(require.toUrl(''), ''));
globalSrc += "\n" + src;
}
})
console.log(globalSrc)

Then go to the homepage of your store, right-click and choose Inspect. Switch to Console, clear it if necessary, paste the above code, and press Enter.

You will get a list of all the JavaScript files used on this page. 

Once you have the list of the JS files from one page, paste it into some of the list intersections tools, like Browserling. Repeat the process on the other page and paste the other JS files list in the tool to find common items.

You can compare the JS files from different pages (product, category, CMS, etc.) till you find the common JS files listed.

3. Enable JavaScript Bundling optimization

After you have the ultimate list of JS files you want to merge into a bundle, go to Stores > Configuration > Magefan Extensions > Rocket Javascript and Enable JavaScript Bundling Optimization. You will have to paste your list of JS files into the Included In Bundling field. 

Don't forget Save Config. 

4. Enable Magento JS bundling

Finally, you have to go back to the Magento JS Settings (Stores > Configuration > Advanced > Developer > JS Settings) to Enable JavaScript Bundling and Merge JavaScript Files. 

Save config and enable production mode back.

Magento JS bundle optimization is not the only benefit of the Rocket Javascript module you get. Except for the weight and number of JS bundles it enables you to optimize the loading of the JS files on the page. 

You can configure Rocket Javascript extension to move all JS to the bottom so it doesn't influence the loading of the page, or defer the loading of some Javascript files.