- Configure Bundle size and exclude list
- Check Performance
Before explaining why bundling should be used, let have a glance at the two ways which assets are loaded in Magento 2.
In this following image, you will see the way assets are loaded on two different pages in Magento which are Homepage and Product page.
! ảnh này a chụp hộ e với ạ https://cdn3.mageplaza.com/media/general/IZhvoyY.png
With requireJS, different assets are loaded through different pages while all bundles are loaded even if they are not needed. In other words, you are able to reduce the number of requests by only loading necessarily assets. However, there are still a huge number of JS files being loaded. If these assets could be merged into just a few files, the performance could be improved even more.
Despite the fact that bundling is missing key features, you can still change a couple of things to organize your bundles better.
Configure Bundle size and exclude list
The bundle size can be changed as well as several scripts can be excluded from the bundle in
! ảnh này a chụp hộ e với ạ https://cdn3.mageplaza.com/media/general/35H4Qdf.png
1MB is the default size for a bundle. Please remember that the number of bundles which will be created are determined by bundle size. For instance, four bundles will be created if you have 4MB of script files and set the bundle size to 1MB.
However, you need to be really careful cause if the number is too low, 10 or more small bundles will be created and block each other during rendering.
Please keep in mind that bundles are loaded synchronously.
Besides, certain scripts can also be excluded from bundles. You can use RequireJS to load them if you need.
Remember that two themes which are Luma and Blank have their own exclude lists, so if you are not fallback properly as well as do not have an exclude list for your own, all JS modules would be bundled even if you do not need them. This would make the bundles become huge.
<exclude> will deal with all the files which should be excluded from the bundle. In Magento 2, bundle content on each page cannot be decided, however, the assets that will not be required through the whole site can be excluded. Because of that, bundles will only consist of the files that are required.
Once the bundle size and exclude list have been configured, now you can enable it.
To turn it on, please follow this:
Stores > Configuration > Advanced > Developer
Because the bundling is only work in Production mode, after turning it on, you need to clear cache and switch the mode from Developer to Production. After doing the above steps, the static files will be deployed and your bundles will be loaded on the Frontend.
The following picture is the Luma theme’s Homepage. The testing was completed on the 2.2.0 “dev” version of Magento. The following setting is in Dev console (Chrome):
! ảnh này a chụp hộ e với ạ https://cdn3.mageplaza.com/media/general/ooirZrq.png
Before activating the bundling, the number of JS requests is 137, the size is 2.0MB and the load time is 9.46sec
! ảnh này a chụp hộ e với ạ https://cdn3.mageplaza.com/media/general/VFur7r9.png
- It negates the benefits when using module loader.
- You will not be able to define bundle content accurately.
Enjoyed the tutorial? Spread it to your friends!