Magento 2 JavaScript Bundling: Optimise Server Requests

• What is Magento 2 Javascript File Bundling?

• Why use Bundling in Magento 2?

• How to Enable Bundling

• How Magento JS Bundling Works?

• Fine-tuning Your Theme

• FAQs

Key Takeaways

• Learn how JavaScript bundling in Magento 2 boosts website performance by merging files for faster page loads.

• Why bundling is crucial for improving user experience and boosting search engine rankings.

• Understand the step-by-step process to enable JavaScript bundling in Magento 2.

• Find out how to exclude specific files from bundling and the importance of doing so for efficient loading.

• Explore tips for fine-tuning your theme with JavaScript bundling for a customized user experience.

• Find answers to JavaScript bundling FAQs, including how to bundle all JS files and popular bundlers.

What is Magento 2 Javascript File Bundling?

Magento javascript bundling is a method that combines individual files to minimize the number of HTTP requests needed to load a page. By doing this, the browser only needs to load a small number of bundles rather than loading numerous JS files.

Why use Bundling in Magento 2?

JavaScript bundling in Magento 2 offers better website performance. By minimizing server requests for JavaScript files, page loading speed is significantly boosted. This results in an enhanced user experience and potential search engine ranking improvement.

Additionally, bundling can help with code maintainability. Instead of having multiple JS files scattered throughout your project, bundling allows you to have one consolidated file. This makes it easier to manage and update the codebase.

How to Enable Bundling

JavaScript bundling is only functional when the application is in production mode. To enable JavaScript bundling, you must use the CLI. Here's a guide on how to set up JavaScript bundling using the CLI.

1. Navigate to the installation directory, and there you need to switch to production mode:

bin/magento deploy:mode:set production

2. Activate JavaScript bundling.

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

3. To optimize bundling, you need to minify JavaScript files:

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

4. Implement cache busting for static file URLs. It guarantees that users always receive the most recent version of the assets whenever they are updated.

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

5. To configure JavaScript bundling, it is necessary to deactivate the merging of JavaScript files. Bundling cannot be performed when files are merged together.

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

6. Changing the settings mentioned above while the application is in production mode will necessitate the deployment of static view files.

bin/magento setup:static-content:deploy

7. In the end, clear the cache:

bin/magento cache:clean config

How Magento JS Bundling Works?

Enabling bundling allows the application to merge numerous JavaScript files into a handful of bundles, which are then downloaded for each page. This optimizes the performance and efficiency of the application.

When the browser downloads the bundles one by one, it blocks page rendering until all the bundles are downloaded. However, the time saved from reducing server requests outweighs the cost of downloading the bundles synchronously.

1. Excluding files

The node in the etc/view.xml file of a theme is used to indicate which files should not be included in bundling JavaScript. RequireJS loads JavaScript files that are excluded from bundling asynchronously when they are needed.

To prevent unnecessary loading on every page, excluding the JavaScript files specifically used for testing or development purposes is advisable. The code snippet below demonstrates the files that should be excluded 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>
    

2. Setting bundle file size

The size of the generated bundles is determined by the variable called "bundle_size." Setting a larger value for bundle_size will result in fewer bundles being generated, but these bundles will have larger file sizes. Setting a smaller value for bundle_size will generate more bundles, but these bundles will have smaller file sizes.

Example:

<vars module="Js_Bundle">
<var name="bundle_size">1MB</var>
</vars   

The objective is to find the right balance between the number of bundles to download and their size. A general guideline is to ensure that each bundle is no smaller than 100 kB.

Fine-tuning Your Theme

You can customize your theme in various ways by usingetc/view.xml file. Here are some steps to assist you in determining which JavaScript files to combine for your luma theme:

• Start by creating a new page with the desired layouts that you want to adjust.
• Compare the JavaScript files that are loaded in the pages with the JavaScript files you have.
• Use the comparison results to create a list of items to exclude.

FAQs

1. How to bundle all JavaScript files?

To understand how to bundle your project's JavaScript file and its dependencies into one output script file, follow the steps below:

• Create a project directory​

• Go to the project's root folder

• Create a package.

• Install the Webpack module bundler​

• Create your project's directories

• Create your source code files

• Add the JavaScript file to your HTML document

• Install some dependencies

• Import your dependencies

• Use the dependencies

• Start the build step

• Refer browsers to the newly created bundle

2. How do I enable bundle js in Magento 2?

To enable JavaScript bundling and merge JavaScript files in Magento, navigate to Magento JS Settings (Stores > Configuration > Advanced > Developer > JS Settings). After making the changes, save config and switch back to production mode. It's important to note that the Rocket Javascript module offers more benefits than just optimizing the Magento JS bundle.

3. What is the most popular bundler in JavaScript?

Webpack is a widely used bundler in the JavaScript ecosystem. It has supported developers for over a decade and has an impressive record of nearly 26 million weekly downloads from the NPM repository.

4. What is the first JavaScript bundler?

The original bundler was known as "+=", which represented concatenation. For a considerable period, it fulfilled all the requirements.

5. What is JavaScript's first name?

Brendan Eich created JavaScript at Netscape Communications Corporation. Initially, it was called Mocha, then LiveScript, and finally settled on the name JavaScript. The decision to rename it to JavaScript happened around the same time Netscape added Java technology support to its web browser, Netscape Navigator.

6. Why use JavaScript bundling?

JavaScript bundling is used to reduce the number of requests that a browser makes to a server. It combines multiple JavaScript files into a single file for performance optimization. Additionally, it minimizes the file size, thereby improving page load times.

7. What should be considered when choosing a hosting service for a Magento 2 store with JavaScript bundling enabled?

When selecting a Magento hosting service for a Magento 2 store with JavaScript bundling, there are key considerations to remember. First, ensure the hosting service supports server-side dependencies like Node.js and required libraries/tools. Also, choose a hosting service with ample resources to handle increased website traffic from improved performance.

Summary

JavaScript bundling is a powerful tool for optimizing the performance of your Magento 2 store. This not only enhances the user experience but also helps to boost your website's search engine rankings. Opt for reliable Magento optimised hosting to fully leverage JavaScript bundling and other advanced features in Magento 2 for your online store.