category oscprofessionals - Blogs - Advanced javascript bundling in Magento2

Advanced javascript bundling in Magento 2

1. What Is Javascript Bundling ?

JavaScript bundling is an optimization Process,its impact on reducing the number of server requests for JavaScript files. Bundling this by merging multiple JavaScript files together into one file to reduce the number of page requests.

2. Javascript bundling in Magento

Bundling javascript modules for better performance is about reducing two things:
  • The number of server requests.
  • The size of those server requests.

3. Javascript Module Bundling

We have a module for bundling in magento Amasty_Extensions.
javascript-bundling-magento-

Amasty extension Test cases for bundling:

i) Backend > stores > Configuration > Advanced > Developer > Javascript settings
  • Merge javascript file : No
  • Enable js bundling: Yes
  • Minify js files : No
  • Move js code to bottom : Yes
javascript
ii)`Backend > store > Configuration > Amasty extension > Google page speed optimizer > settings > Javascript setting
  • Amasty js optimization : Enable
  • Is magento Cloud : No
  • Run optimization option and follow all steps
  • Click on save config button
configuration
iii)From CLI
  • Set store mode as production
  • Run full deployment
  • Clear all cache and set all permissions

4.Enable JavaScript bundling

Javascript bundling does not work unless your magento store is in production mode, once in production mode,javascript bundling can only be enabled using the command lines.
1.Switch to Production mode
$bin/magento deploy:mode:set production
2.To enable Magento’s built-in bundling from the command line
$ php -f bin/magento config: set dev/js/enable_js_bundling 1
3.To 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 enable Magento’s built-in merging from the command line
$ php -f bin/magento config:set dev/js/merge_files 1

Output After bundle:

bundle

Conclusion

According to javascript bundling it gets a result to the minimum request of the server. The advanced JavaScript (JS) Bundling for the ecommerce websites of our clients and improve our practices.

Latest Posts

One Comment

  1. John D. July 7, 2022 at 2:39 pm

    Well informed Blog!!

Leave A Comment