How to combine Javascript files in Magento 2

Combining Javascript files is a very common way to reduce time of page loading by reducing quantity of HTTP requests, that are required to bring on Javascripts on your pages.

Having all Javascript files combined, basically you will need to load only one combined file instead of large quantity of separate javascript modules.

There´s two ways to combine Javascript modules.

Merging Javascripts

The simplest way to combine all your Javascript files is merging. This technique just concatenates all of them to the one large file. Here is what you need to do:

1. Log in to your Magento 2 Backend and navigate to Stores → Configuration → Advanced → Developer
2. Switch to the desired Storeview with the switcher on the top ribbon, if need - merging can be enabled separately for each your store.
3. Unfold Javascript Settings pane and enable option Merge JavaScript Files
4. If you wish to make combined Javascript file smaller, enable also option Minify JavaScript Files. It will make Magento 2 to remove formatting, spacing and other non-significant parts of combined scripts.
5. Navigate to System → Cache Management, scroll to Advanced Cache Management section and press Flush Javascript/CSS Cache button.
6. After that, consequentally press buttons Flush Magento Cache and Flush Cache Storage on the top ribbon.
7. Regenerate static content with Flush Static Files Cache button at Advanced Cache Management section.

This will make all Javascripts on all your pages combined to one large file.

But often it is not enough. Merging combines only files, loaded via layouts - i. e. files, which are present on every page. For on-demand Javascripts, loaded via internal Magento 2 RequireJS engine you need to use Bunding as well.

Bundling Javascripts

RequireJS is a modern Javascript loader engine, which allows developers restrict Javascript files with loading only on specific pages. These files loaded asynchronously (i. e. when they are needed), therefore, merging will not add them to the combined file.

This is where Bundling come. When it enabled and page is being rendered, Magento 2 picks all RequireJS modules and combines them on-the-fly. Here is how bundling is enabled:

1. Log in to your Magento 2 Backend and navigate to Stores → Configuration → Advanced → Developer
2. Switch to the desired Storeview with the switcher on the top ribbon, if need - bundling can be enabled separately for each your store as well.
3. Unfold Javascript Settings pane and enable option Enable JavaScript Bundling
4. Navigate to System → Cache Management, scroll to Advanced Cache Management section and press Flush Javascript/CSS Cache button.
5. After that, consequentally press buttons Flush Magento Cache and Flush Cache Storage on the top ribbon.
6. Regenerate static content with Flush Static Files Cache button at Advanced Cache Management section.

Unlike merging, Bundling allows you to exclude Javascript modules from combining. It is very useful, when you´re using modules with Javascript conflicts in combined mode.

To exclude Javascript modules from bundling:

1. Log in to FTP/SSH of your store and navigate to the root of your store.
2. Proceed to your theme directory (for example, Luma theme is located at magento root/vendor/magento/theme-frontend-luma) and navigate to its etc subdirectory.
3. Open view.xml file and find line <vars module=``"``Js_Bundle``"``>.
4. Under this line, put Javascript modules, that you need to exclude, to the <exclude> block just as they named in RequireJS loading directives.

You can also restrict here size of dynamically created bundle by adjusting bundle_size property.

Did you know…

… that you can even more reduce time of page loading. Our company offers you Full Page Cache Warmer extension. It allows you to flexibly manage your cache, prevent unnecessary cache cleaning and applying changes to your store pages without speed loss. This makes your store dramatically faster. Cache Warmer even can increase your store SERP ranking due to optimal page load speed.