Can anyone work on Advanced JS Bundling?
We would like to apply this concept to one of our client projects.
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?
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
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
- node.js >= 8.x
- npm >= 6.x
- Magento 2 DevTool
B) DevTool Installation
- Clone the repository in your local machine
Ex: git clone https://github.com/magento/m2-devtools.git
- Run npm install
- Run npm start (or)npm run build
- Navigate to chrome://extensions
- Enable Developer mode
- Click Load unpacked
- Select the extension folder in the root of this repository
- Close & reopen chrome browser
C) Usage of DevTool
Visit any page in the storefront in a browser with this extension installed
Open RequireJS >> Bundle Generator
Click the Record button
Begin navigating to critical pages of your store (Home/Catalog/Product/Cart/Checkout)
Click the Record button again when you are finished
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
- 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.
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.
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
Install the RequireJS Optimizer: You must have node.js installed locally/Server. Run npm install -g requirejs
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/”
r.js -o build.js baseUrl=”pub/static/frontend/Demo/Learning/en_US_source/” dir=”pub/static/frontend/Demo/Learning/en_US/”
My website is running at Magento 2.4.2 at ubuntu server.
I have followed all of the steps and Advanced bundling completed successfully. but there is some js errors occur.
The Menu and many other Js is not working After advanced bundling.
Here is the JS error:
- //# sourceMappingURL=shared.js.map;/**
- Copyright © Magento, Inc. All rights reserved.
- See COPYING.txt for license details.
This Always shows undefined * error.
- Uncaught TypeError: require.config is not a function
Advanced bundling works fine with disable js Merge. But, at google speed % didn’t increase.
Please help. how to fix the Js error.
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
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0