7

Can any one worked on Advanced JS Bundling? We would like to apply this concept to one of our client projects. Could you please explain about Advanced JavaScript bundling in detailed step by step & is there any tools (or) modules need to be installed for verify?,Is it possible to implement advanced JS Bundling in Magento/2.2 (Enterprise)?

Note: I followed M2developer Docs but unable to understand & implement. Could you please guide me. & would like to know what are the challenges are going to handle?

Is there any difference between JS bundling and Advanced JS bundling?

4

I did R & D on this task and prepared some implementation notes it might help you others if you would like to do, please follow the below steps on Advanced JS Bundling.

A) Required Tools

  1. node.js >= 8.x
  2. npm >= 6.x
  3. Magento 2 DevTool
  4. Git

B) DevTool Installation

  1. Clone the repository in your local machine Ex: git clone https://github.com/magento/m2-devtools.git
  2. Run npm install
  3. Run npm start (or)npm run build
  4. Navigate to chrome://extensions
  5. Enable Developer mode
  6. Click Load unpacked
  7. Select the extension folder in the root of this repository
  8. Close & reopen chrome browser

enter image description here enter image description here

C) Usage of DevTool

  1. Visit any page in the storefront in a browser with this extension installed

  2. Open RequireJS >> Bundle Generator

  3. Click the Record button

  4. Begin navigating to critical pages of your store (Home/Catalog/Product/Cart/Checkout)

  5. Click the Record button again when you are finished

  6. Follow the installation instructions in the Bundle Generator UI

Please refer below link for the usage of DevTool taken an example from default Magento 2.3.1 here

D) Setup Instructions

  1. Install the Magento_BundleConfig module: This module is currently not consumable via the composer. Manually install the Magento_BundleConfig module from Github. Make sure you've run setup: upgrade and that the module is enabled.

Refer: htps://github.com/magento/m2-devtools/tree/master/Magento_BundleConfig

2.Set Store to Production Mode: php bin/magento deploy:mode:set production

3.Backup Static Content Source: For the theme that you are bundling, move each language folder to a folder of the same name, appended with _source. For example, if you're bundling Luma in English, move frontend/Magento/luma/en_US to frontend/Magento/luma/en_US_source. Just rename en_US to en_US_source

  1. Install the RequireJS Optimizer: You must have node.js installed locally/Server. Run

npm install -g requirejs

5.Save the Generated Bundle Config: Click Copy to Clipboard in the Bundle Generator tab. Save the entire configuration in a file called build.js in the root of your store. (You have seen how to get build.js from the above video reference link)

r.js -o build.js baseUrl="pub/static/frontend/Magento/luma/en_US_source/" dir="pub/static/frontend/Magento/luma/en_US/"

Example: r.js -o build.js baseUrl="pub/static/frontend/Demo/Learning/en_US_source/" dir="pub/static/frontend/Demo/Learning/en_US/"

If the above steps have been performed correctly, your store should now be running with optimized JavaScript bundles.

https://prnt.sc/no7j3z

enter image description here

  • Hi @Nagaraju Kasa, Is it possible to implement it on Magento 2.2.x? Thanks! Pablo – Pablo Garcia May 27 at 23:06
  • yes might be possible, i am working to apply the same concept to one of my project version 2.2.2 EE – Nagaraju Kasa May 28 at 2:53
  • 1
    Thanks for your quick answer @Nagaraju Kasa. I need to implement it on Magento 2.2.2CE. – Pablo Garcia May 28 at 12:39
  • @pablo Garcia Please feel free to ask if you have any quires regarding advanced js bundling. Please let me know once u applied this concept to your project (or) default magento. thanks – Nagaraju Kasa May 28 at 14:01
  • Sure! I'll keep you posted about it! Thanks @Nagaraju Kasa. Also let me know if you were able to implement it on 2.2.2EE please. – Pablo Garcia May 28 at 14:06
0

How to enable bundling in Magento:

If your Magento store is in developer mode then go to

Store->configuration->advanced->Develoer->JavaScript Settings

and set Enable JavaScript Bundling to yes

and then deploy your Magento store in production mode by following the command

php bin/magento deploy:mode:set production

and clear cache then your bundling will work

Why JS bundling require(What is the purpose of it) :

by default if you add js via require js it will consume one more request, to overcome and to merge ass require js file we use js bundling

JS bundling bundle all js file in small bundle(3-4) request this way we can save hundreds of request

A disadvantage of using JS bundling:

Magento will try to combine all JS files into a few big bundles to improve loading procedures. But JS bundling prevents page load until the browser finishes downloading all JS bundles

  • yes, murtuza this is ok, but what is mean by advanced js bundling and how do we do? please advise – Nagaraju Kasa May 12 at 5:34
  • okay, by default if you add js via require js it will consume one more request, to overcome and to merge ass require js file we use js bundling – Murtuza Zabuawala May 12 at 6:30
  • Hello @murtuza zabuawala i need your guidance on prnt.sc/nnrriq advanced js bundling. (Native magento provides js bundling) i hope now u got my point. – Nagaraju Kasa May 13 at 5:13
0

If your Magento store is in production mode then

Magento ≥ 2.2 It can be done by the command line

 php bin/magento config:set dev/js/enable_js_bundling 1
 php bin/magento cache:clean

Magento < 2.2

UPDATE `core_config_data` SET `value`='1' WHERE `path`='dev/js/enable_js_bundling';

Then run this command php bin/magento cache:clean

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.