Js bundling in Magento2

In this article, We will learn about Magento JS Bundling and Advanced JS Bundling.

What is Javascript bundling?

Javascript bundling is an optimization technique that is used in today’s module-based development to group individual files to decrease the number of HTTP requests which are needed to load a page. This is acquired by merging multiple JavaScript files together into one file. Besides, it denies the main advantage of using module loaders such as RequireJS which is loading files asynchronously.

Enable bundling

1) . From the installation directory, switch to production mode:

bin/magento deploy:mode:set production

2).Enable JavaScript bundling

bin/magento config:set dev/js/enable_js_bundling 1

3). Optimize bundling by minifying JavaScript files:

bin/magento config:set dev/js/minify_files 1

4).Enable cache busting on static file URLs. This ensures users get the latest version of the assets anytime they update:

bin/magento config:set dev/static/sign 1

5). To configure JavaScript bundling, you must disable Javascript file merging. Bundling will not work as the merging of files excludes bundling:

bin/magento config:set dev/js/merge_files 0

6). bin/magento setup:static-content:deploy

7). Finally, clear the cache:

bin/magento cache:clean config

How bundling works

Magento 2 JS Bundling mechanism works to combine all the javascript bundles into some few javascript bundles and loaded for all the pages. Page rendering is blocked until the browser downloads all the bundles synchronously. Each bundle should be at least 100KB as per the Magento Standard.

To make it easier to use, you can also exclude the specific file that could not be processed in bundling using etc/view.xml.

The following code snippet from Luma theme shows the types of files you should exclude from the bundling process.

<exclude>
    <item type="file">Lib::jquery/jquery.min.js</item>
    <item type="file">Lib::jquery/jquery-ui-1.9.2.js</item>
    <item type="file">Lib::jquery/jquery.ba-hashchange.min.js</item>
    <item type="file">Lib::jquery/jquery.details.js</item>
    <item type="file">Lib::jquery/jquery.details.min.js</item>
    <item type="file">Lib::jquery/jquery.hoverIntent.js</item>
    <item type="file">Lib::jquery/colorpicker/js/colorpicker.js</item>
    <item type="file">Lib::requirejs/require.js</item>
    <item type="file">Lib::requirejs/text.js</item>
    <item type="file">Lib::date-format-normalizer.js</item>
    <item type="file">Lib::legacy-build.min.js</item>
    <item type="file">Lib::mage/captcha.js</item>
    <item type="file">Lib::mage/dropdown_old.js</item>
    <item type="file">Lib::mage/list.js</item>
    <item type="file">Lib::mage/loader_old.js</item>
    <item type="file">Lib::mage/webapi.js</item>
    <item type="file">Lib::mage/zoom.js</item>
    <item type="file">Lib::mage/translate-inline-vde.js</item>
    <item type="file">Lib::mage/requirejs/mixins.js</item>
    <item type="file">Lib::mage/requirejs/static.js</item>
    <item type="file">Magento_Customer::js/zxcvbn.js</item>
    <item type="file">Magento_Catalog::js/zoom.js</item>
    <item type="file">Magento_Ui::js/lib/step-wizard.js</item>
    <item type="file">Magento_Ui::js/form/element/ui-select.js</item>
    <item type="file">Magento_Ui::js/form/element/file-uploader.js</item>
    <item type="file">Magento_Ui::js/form/components/insert.js</item>
    <item type="file">Magento_Ui::js/form/components/insert-listing.js</item>
    <item type="directory">Magento_Ui::js/timeline</item>
    <item type="directory">Magento_Ui::js/grid</item>
    <item type="directory">Magento_Ui::js/dynamic-rows</item>
    <item type="directory">Magento_Ui::templates/timeline</item>
    <item type="directory">Magento_Ui::templates/grid</item>
    <item type="directory">Magento_Ui::templates/dynamic-rows</item>
    <item type="directory">Magento_Swagger::swagger-ui</item>
    <item type="directory">Lib::modernizr</item>
    <item type="directory">Lib::tiny_mce</item>
    <item type="directory">Lib::varien</item>
    <item type="directory">Lib::jquery/editableMultiselect</item>
    <item type="directory">Lib::jquery/jstree</item>
    <item type="directory">Lib::jquery/fileUploader</item>
    <item type="directory">Lib::css</item>
    <item type="directory">Lib::lib</item>
    <item type="directory">Lib::extjs</item>
    <item type="directory">Lib::prototype</item>
    <item type="directory">Lib::scriptaculous</item>
    <item type="directory">Lib::less</item>
    <item type="directory">Lib::mage/adminhtml</item>
    <item type="directory">Lib::mage/backend</item>
</exclude>

In this way, we can exclude some scripts from the bundle but can’t decide to load only page-specific bundles and this is the reason why it takes time to load the mini-cart data or other checkout related data after finishing the page load.

It also somewhat affects increasing the bundle’s file size while enabling Minifying/Merging JS in the backend. When we allow the Minify JS option in the backend, it turns out the file (bundle0.min.js) is 8 MB.

Magento JS Bundling increases the file size of the bundle and uses the alternate option for bundling Advanced JS Bundling. In logical terms, it is somewhat right why we load unnecessary all JS, which is mostly not required for specific pages.

Advanced Bundling JS

Advanced Bundling combines all the packages and serves them in one box. It boosts speed performance and reduces server requests and bundle size for each page loaded in the browser.

To use Advanced Bundling JS, we have to build bundles for each page, especially those necessary, like the Home page, Category Page, Product Page, Cart, and Checkout Page.

For example, you might end up with a bundle for the dependencies common to all pages, a bundle for CMS-only pages, a bundle for Catalog-only pages, another bundle for Search-only pages, and a bundle for Checkout pages.

Required tools

The following steps require you to install and have familiarity with the following tools:

• node.js

• requirejs

• Phantom.js(Optional)

Hope this will help you.

Thanks 🙂