Magento 2 : Does javascript bundling make any difference?

  1. Don’t bundle or merge at all.
  2. Use built-in bundling.
  3. Merge javascripts.
  4. Use a tool like Baler, Magepack, Or do it yourself by following this
php bin/magento config:set dev/js/move_script_to_bottom 1
php bin/magento cache:flush
require(['jquery'],function($){
console.log('hello');
})
//THis is navigation menu will break with 'function require not //definted error

Enable javascript merging

One option you have is turn on javascript merging.

php bin/magento config:set dev/js/merge_files 1
php bin/magento cache:flush
Javascript merging turned on generates merged files

Magento’s in-built bundling

php bin/magento config:set dev/js/enable_js_bundling  1
php bin/magento cache:flush
php bin/magento setup:static-content:deploy
Built in bundling

Advanced Javascript bundling

  1. common bundle
  2. cms bundle
  3. category page bundle
  4. product details page bundle
  5. cart/checkout bundle
php bin/magento setup:static-content:deploy;
magepack generate
magepack bundle
/* This also requires you to install magepack magento extension along with the magepack npm package */
  1. Even if one of your javascript bundle file has a javascript module which throws an exception, nothing else will work. This is because, the javascript execution for that script is halted on exception.
  2. If there is render blocking javascript written using `require([‘something from bundle’],function(){//your code })` pattern, the whole bundle will be downloaded and parsed and compiled. Although not a very significant trade-off, the impact depends on how big your bundle is and what are your modules doing.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store