How We Optimize Magento 2 Online Stores with Advanced JavaScript Bundling
The large-sized JavaScript files is a problematic issue in Magento 2, and JavaScript (JS) bundling is developed to decrease the size and number of requested resources for each webpage with a purpose to optimize the online store working. There are two main types of JavaScript Bundling: default and advanced ones.
The large-sized JavaScript files is a problematic issue in Magento 2, and JavaScript (JS) bundling is developed to decrease the size and number of requested resources for each webpage with a purpose to optimize the online store working.
There are two main types of JavaScript Bundling: default and advanced ones.
The default version of bundling lies in the fact that an entire set of files is loaded on each webpage, such as checkout, product and category page, etc.
What to Know about Advanced JavaScript (JS) Bundling
It helps to solve this problem in the following way. It forms bundles by webpage types, such as a general bundle for all JavaScript files which are necessary for each webpage, and separate bundles for the checkout stage, CMS page, category & product webpages, etc.
According to the Magento documentation, there’re two main ways to put it into practice:
- Manual adjusting based on RequireJS optimizer;
- Using the Magento_Baler Module.
The first option is quite challenging and time-consuming, and it involves manual configuration for each bundle.
The Magento_Baler module uses a similar approach but involves automation. So it’s an improved and upgraded version of the first method, which has a high potential for further development and usage among engineers. Currently, the module is in the early alpha-testing stage, is not stable, and contains a range of bugs.
How We Work with Advanced JavaScript Bundling in Magecom
Our engineers have been using Advanced JavaScript Bundling on projects for several months, and in particular, they are actively working with the Baler module.
It merely allows selecting a theme for which you need to launch bundling and start rendering. There is a pre-installed set of webpages, and after generation, you’ll receive more scripts connected to the webpage than through M2DevTools. You could also use another option—Magepack.
Besides, we’ve already used it on the Magento 2.3.4 stores, and it works pretty well. There, the main idea is that you specify links to webpages, such as homepage, catalog, product, and bundling is generated based on these links. At the course of generating, the tool also involves the checkout stage and shopping cart. One command generates build.js, and the second one launches the bundling itself.
Conclusion
To sum up, we’d like to say that our team of engineers will undoubtedly use the Advanced JavaScript (JS) Bundling for the ecommerce websites of our clients and improve our practices.
If you have any questions on the Advanced JavaScript (JS) Bundling or want to optimize our Magento 2 store working, contact us. We will reply to you soon and help you with pleasure.
Hunting for Magento development support?
We’ll be in touch soon if you leave your contact information
