7

I've read so many conflicting write up's and blogs about whether to "Enable Javascript Bundling" or not. Some say it's slow and some say it's faster when enabled.

From what I understand it takes all scripts of a module and merges them into a single script. If you enable this feature, a page will load the whole javascript content regardless of whether it is used on the page or not. As a result, page size increases - bad news for store performance.

Why would you want load a bunch of scripts you are not using? I'm not sure if there is an official thread about bundling and the pros and cons but perhaps we can make this the official thread.

I've noticed on my 2.3 store it's faster when JavaScript bundling is not enabled.

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/js-bundling.html

https://inchoo.net/magento-2/javascript-bundling-magento-2/

2 Answers 2

3

There is more info about this on the dev docs here - https://devdocs.magento.com/guides/v2.4/performance-best-practices/advanced-js-bundling.html where Magento agree that the core bundling method results in a poor experience for users:

Magento bundling reduces the number of connections per page, but for each page request it loads all bundles, even when the requested page may only depend on files within one or two of the bundles. Performance improves after the browser caches the bundles. But, because the browser loads these bundles synchronously, the user’s first visit to a Magento storefront could take a while to render and hurt the user experience.

enter image description here

At Slow 3G connectivity, it takes about 44 seconds to load all the bundles for the homepage of a clean Magento installation.

And this is before you add any custom JS!

So how can we bundle?

There are a number of different tools built to try and bundle the JS in a better way, I have tried the ones below with varying results. The general results were good on a core instance of Magento after some configuring and patching, it was painful but worked.

It was a different story on a custom theme though, every single tool ran into errors, and when I fixed those errors something else would go wrong, then something else. So in the end I gave up. This could have been something in the theme causing issues although it was a very typical M2 theme using the core stack.

Regardless of what we do the core Magento 2 frontend stack (not PWA studio) is never going to result in a fast website unless you rewrite every piece of functionality, loading hundreds of JS files is a terrible idea and we are left to fix this as Magento seemed to drop the frontend stack the moment M2 was released.

4
  • 1
    Just curious. Which of those listed above did you have the most success with? Commented Sep 11, 2020 at 14:41
  • 1
    github.com/WeareJH/config-gen - But I did spend more time on this than the others. They are all very close as they are just generating a config for the Require JS optimizer, these tools don't actual bundle the JS.
    – Ben Crook
    Commented Sep 11, 2020 at 14:43
  • Have you implemented magepack on magento 2 cloud?
    – Haritha
    Commented Jun 22, 2021 at 15:53
  • Nope I don't believe so
    – Ben Crook
    Commented Jun 23, 2021 at 13:59
3

I looked into this and compared various bundling options using a site running 2.3.4

Options compared:

  • Bundle only
  • Bundle and Merge
  • No Bundle, No Merge

I found no bundling or merging gave the best Google Page speed score for our homepage and product detail page (category was slightly slower).

When I turned on bundling+merging initially, our average page load time reported in Google Analytics went from 5 seconds to 15 seconds, which prompted the research. Raw data (Google page speed metrics) attached as an image below.

Magento2 JS Bundling Speed comparison

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.