{"id":1449,"date":"2017-09-23T21:55:25","date_gmt":"2017-09-23T21:55:25","guid":{"rendered":"http:\/\/inchoo.net\/?p=29344"},"modified":"2017-09-23T23:12:28","modified_gmt":"2017-09-23T23:12:28","slug":"javascript-bundling-in-magento-2","status":"publish","type":"post","link":"https:\/\/www.sushilkumar.ind.in\/blog\/magento-2\/javascript-bundling-in-magento-2\/","title":{"rendered":"Javascript Bundling in Magento 2"},"content":{"rendered":"

Javascript bundling<\/strong> is a technique that groups separate files in order to reduce the number of HTTP requests that are required to load a page. Bundling is commonly used in today\u2019s \u201cmodule-based\u201d development where some functionalities are basically split into Modules (roughly explained). For loading modules, we usually use some of popular module loaders such as rollup.js<\/strong> or RequireJS<\/strong> (which is Magento\u2019s weapon of choice).<\/span><\/p>\n

HTTP2<\/strong> is here so this technique will be probably deprecated in the future. You could still use bundling for reducing the number of requests for a specific page but I don\u2019t think it will be worth of it.
\nRight before we start with \u201creverse\u201d optimisation, we can use bundling to help us organise our assets and serve less files to the client which will (should) result in faster website.<\/p>\n

One of our services is Technical audit<\/strong> which covers various tests on both Frontend and Backend part of the client\u2019s store. Since i\u2019m Frontend Developer, performance is my key point during analysis.<\/p>\n

First thing I check is wether Javascript and CSS files are merged\/minified\/bundled (hello bundle). When I was Junior Developer, I was so happy\/angry when I discovered someone didn\u2019t turn these ON since I was thinking that technical level of Developers who worked on site was low and we can do a lot to improve site\u2026 and of course, I could get a \u201cquick win\u201d with turning merging\/minifying ON.<\/p>\n

\"\"<\/p>\n

Well, in theory that was great. Usually I was right about their expertise level but I was wrong about one thing \u2013 they didn\u2019t \u201cforgot\u201d to turn these ON.<\/p>\n

Explaining to the client that you would probably have to refactor 80% of the code to change that \u201csimple option\u201d is something I wouldn\u2019t want to go through again.<\/p>\n

We were doing Technical audit of the Magento 2 store and when I found out that Javascript and CSS files were not merged\/minified\/bundled I was in shock and first question that was going through my head was \u201cshall I report this to the client?!\u201d.<\/p>\n

Strange question, I know. But it does make sense because if I report it, I\u2019ll have to fix it.<\/p>\n

Just kidding, of course this was included in our report and was first thing I changed when we took over the project.
\nHow did it go? Well, do you write articles about stuff that work as expected?<\/p>\n

Magento 2 Bundling<\/h2>\n

I must note that official docs do not give us a lot of information and there are only few discussions online about it.<\/em>
\n Therefore, I may be wrong in some of my conclusions so feel free to correct me in comments \ud83d\ude42<\/em><\/p>\n

For start, let\u2019s see 2 proper ways to load assets in Magento 2.
\nIn this example, you can see how assets are loaded on two different Magento pages \u2013 Homepage and product page.<\/p>\n

\"\"<\/p>\n

As you can see on example above, requireJS loaded different assets through different pages while all bundles were loaded regardless of wether they are needed or not.
\nWith RequireJS, we can load specific JS modules on specific pages which means you will load only necessarily assets and reduce number of requests.<\/p>\n

(If you wish to know more about how to load Javascript files with RequireJS, you can read this excelent article from my coleague Domagoj Potkoc. )<\/em><\/p>\n

While RequireJS did help us with reducing number of requests through the page, we still have few JS files being loaded and \u201cfew\u201d in Magento 2 means 40-50. We need a way to merge those assets into just few files. We need to create 5 files out of 50.
\nFiles are being loaded asynchronously but still, if we could merge these files into just few, we could improve performance even more.
\nBundling comes as a problem solver since it is used to merge modules and it dependencies into single file.
\nBundling denies main benefit of using module loaders such as RequireJS since assets aren\u2019t loaded asynchronously. Bundles are included with <script> tag, inside <head> section of the page.<\/p>\n

So, why use it?<\/strong><\/p>\n

With bundling we could decide on where to load specific bundle and that\u2019s the best part of it! For example, we want to put all checkout-related stuff into one bundle and load it only on checkout page!<\/p>\n

Feeling happy?<\/h3>\n

Well, Magento folks didn\u2019t implement RequireJS optimizer<\/strong> which is required for ordering and organising module load across different pages. You can exclude some scripts from bundle but you CAN\u2019T decide on bundle content for a specific page.<\/p>\n

So, why use it?<\/strong><\/p>\n

With Merging, you can only merge Javascript files that are NOT being loaded through RequireJS. If you wish to \u201cmerge\u201d JS modules, you will have to use bundling.<\/p>\n

You probably have so many questions in your head right now. So do I. And I\u2019m still searching for the answers.<\/p>\n

\"\"<\/p>\n

Here is a random Zen image, just to chill you down.<\/em><\/p>\n

Bundling misses key features (imho) but you can still change few things in order to organize your bundles.<\/p>\n

Bundle size and exclude list<\/h2>\n

In Vendor\/Theme\/etc\/view.xml <\/em><\/strong>y<\/em>ou can change bundle size and exclude some scripts from bundle.<\/p>\n

\"\"<\/p>\n

Default size for bundle is 1MB.
\nBundle size determines number of bundles that will be created. For example, if you have 4MB of script files and bundle size is set to 1MB, you will have 4 bundles created.<\/p>\n

If number is too low, you will probably have 10 and more small bundles which will block each other during rendering so be careful with this.
\nRemember that bundles are not loaded asynchronously.<\/p>\n

We can also exclude certain scripts from bundles. They will be loaded with RequireJS when needed.
\nKeep in mind that Luma<\/strong> and Blank<\/strong> themes have their own exclude lists and if you are not properly fallbacking and don\u2019t have your own exclude list, bundles will be huge since all JS modules will be bundled, regardless of whether you need them or not.<\/p>\n

<exclude> <\/strong>handle takes care of files that should be excluded from bundle. As far Magento 2 is concerned \u2013 since we can\u2019t decide on bundle content for each page, at least we can exclude assets that will not be required through the whole site, therefore bundles will consist only files that are required everywhere. As you can see in above example (Luma theme exclude list), jQuery assets are probably required everywhere so i don\u2019t understand idea behind excluding these from bundles. Probably Magento folks wanted to leave most important stuff under RequireJS control.<\/p>\n

Activating bundling<\/h2>\n

After we have configured our bundle size and exclude list, it is time that we turn bundling on and enjoy great performance impact.<\/p>\n

We can turn bundling on here:\u00a0Stores > configuration > advanced >developer<\/em><\/strong><\/p>\n

\"\"<\/p>\n

After bundling is ON, clear cache and switch to production mode (bundling will not work in \u201cDeveloper\u201d mode). Static files will be deployed and you will see your bundles being loaded on the Frontend.<\/p>\n

What about performance?<\/h2>\n

We did a lot in order to reduce number of requests through the site. But, there is one small problem with performance.<\/p>\n

This is Homepage of the Luma<\/strong> theme.
\nTesting was done on Magento 2.2.0 \u201cdev\u201d version, with following setting in Dev console (Chrome):
\n\"\"<\/p>\n

Before turning bundling ON:<\/strong>
\n\"\"<\/p>\n