How to Configure JavaScript Merging and Minify in the Admin UI in Magento

Apr 3, 2019833
How to Configure JavaScript Merging and Minify in the Admin UI in Magento

This article is dedicated to an important aspect of Magento 2 front end certification – how to configure JavaScript merging and minify in the Admin UI. We will go over the following questions:

Table of contents:

What options are available to configure JavaScript minification and bundling?
How does Magento minify JavaScript?
What is the purpose of JavaScript bundling and minification?

What options are available to configure JavaScript minification and bundling?

The options responsible for configuration merging and minify JS files are located at the following path: Admin UI -> Stores -> Configuration -> Advanced tab -> Developer > JavaScript Settings.

Stores configuration magento

magento configuration

The Developer tab is displayed only if the site is in Developer’s mode. In order to switch to this mode, enter the following in the console Magento server:

If the command is correct, then console with put out the following line:

How does Magento minify JavaScript?

Minification is the process of deleting odd components like spaces or symbols from JS files; as a result, the size of the code is decreased and website loading is improved.

What is the purpose of JavaScript bundling and minification?

Without bundling all JS files are loaded one by one, and if you have a lot of files, you will also get a lot of server requests. JavaScript bundling unites files into one, decreasing the number of server requests. If the bundled file is minified, it greatly improves the loading speed and generally optimizes the website.

However, there is a disadvantage in these processes: you can exclude some scripts from the package, but you can’t choose certain scripts for a certain page.

With Merging you can unite only the JavaScript files that are not loaded via RequireJS. If you want to unite JS modules, you’ll need to reserve to bundling.

In Vendor/Theme/etc/view.xml you can modify the package size and exclude certain scripts from the package.

magento configure javascript merging

The default package size is 1mb, and you get a clear understanding of how many packages will be created from the file if you know its size (3mb file means 3 packages). If the size is too small, you will probably get 10 and more small bundles that will block each other during the rendering. Bear in mind that packages can’t load asynchronously. We can also exclude certain scenarios from packages; they will be loaded with RequireJS if necessary.

Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Vlad

Example of script requests without JavaScript files bundling and merging:

configure java script merging

configure java script merging

Example of loading with bundling of JavaScript files:

bundling of js files

As you can see, some scripts loaded separately via Require JS and six scripts got bundled.

Example of loading scripts with bundle and merging of JavaScript files:

merging of java script files

Instead of a number of bundling JavaScript files, we get one merged file, plus several separate scripts loaded with RequireJS.

Wrapping it up

This is how you configure JavaScript merging and minify in the Admin UI in Magento 2. If you have any questions or comments, please leave them down below.


How useful was this post?

Average rating / 5. Vote count:

Partner With Us Looking for a partner that will help you to grow your business? We are the right company to develop your webstore. Feel free to get in touch with us. We will be happy to discuss your business opportunities and provide you with a Free Quote. Talk to Vlad

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *