Bundling JavaScript files on your Magento 2 store significantly reduces the number of server requests and speeds up page loading time. Although Magento provides a native JS bundling functionality to enhance website performance, it isn\u2019t advanced enough to achieve optimal results and significantly improve user experience.<\/p>\n\n\n\n
Our Magento 2 Page Speed Optimizer extension<\/a> boosts the default Magento JS Bundling functionality with more advanced techniques that load only necessary JS code. This minimizes server requests and significantly improves page load times, delivering an even faster user experience. However, the configuration of JS bundling requires additional steps when performed on a Magento 2 Cloud environment. In this article, we will provide all the steps in detail to guarantee easy and safe implementation.<\/p>\n\n\n\n JS bundle creation on Magento Cloud slightly differs from the advanced JS bundling process in the Plumroclet extension<\/a>, which is designed for automatic setup in Magento on-premises environments. <\/p>\n\n\n\n The main challenge lies in the Magento Cloud\u2019s restriction on file editing permissions. These limitations may cause issues in executing standard commands and, consequently, disrupt the setup of JS file mapping. However, mapping JS files is crucial as it allows the extension to identify which files are necessary for specific pages, allowing it to create optimized bundles.<\/p>\n\n\n\n As a result, the JS bundle configuration stage should be different for Magento Cloud. In this tutorial, we will cover 2 methods for setting up JS bundling in Magento Cloud:<\/p>\n\n\n\n This method is recommended and requires less time and effort to complete. Note that all actions should be performed exclusively on the stage\/dev contained in the Magento Cloud, which is a copy of the production.<\/p>\n\n\n\n Step 1. Enable Static Content Deployment<\/strong><\/p>\n\n\n\n First, you should enable static content deployment<\/a> for this environment on demand. To do this, follow the next steps:<\/p>\n\n\n\n Step-by-step guide:<\/p>\n\n\n\n Step 2. Configure Smart JS Bundling<\/strong><\/p>\n\n\n\n Then, when Step 3. Deploy changes to production<\/strong><\/p>\n\n\n\n Lastly, after JS bundles are created, we recommend checking if the website functions properly. If everything works as expected, you need to download the Now, the process of configuring bundles for Magento 2 Cloud is complete. You just need to enable them and regenerate the static content for the changes to take effect. Use this command to regenerate static content: Step 1. Set up your local development environment<\/strong><\/p>\n\n\n\n Set up your local dev environment and make sure it\u2019s up to date and matches the production.<\/p>\n\n\n\n Step 2. Set up JS Bundles on your local environment<\/strong><\/p>\n\n\n\n At this point, complete all the steps described in the Setti<\/a>ng Up JS bundles<\/a> section of the Magento 2 Page Speed Optimizer extension<\/a> configurations.<\/p>\n\n\n\n Step 3. Deploy changes to production<\/strong><\/p>\n\n\n\n After JS bundles are created, we recommend checking if the website functions properly. If everything works as expected, you need to download the Now, the process of configuring bundles for Magento 2 Cloud is complete. You just need to enable them and regenerate the static content for the changes to take effect. Use this command to regenerate static content:<\/p>\n\n\n\n The JS bundle configuration process is generally similar to the default process. However, in the Magento Cloud scenario, it requires some additional preparation steps in the development environment and manual manipulations with the It is also worth noting that regenerating JS bundles are highly recommended not only for the initial setup of the Magento 2 Google Page Speed Optimizer extension but also whenever there are changes to the JavaScript files on the site (such as when a module is installed\/updated or when new files are added). This helps ensure optimal performance and avoid potential JS issues.<\/p>\n","protected":false},"excerpt":{"rendered":" Bundling JavaScript files on your Magento 2 store significantly reduces the number of server requests and speeds up page loading time. Although Magento provides a native JS bundling functionality to enhance website performance, it isn\u2019t advanced enough to achieve optimal results and significantly improve user experience. Our Magento 2 Page Speed Optimizer extension boosts the … <\/p>\nWhy JS Bundling Setup is Different on Magento Cloud<\/h2>\n\n\n\n
Setting Up JS Bundles on Magento 2 Cloud<\/h2>\n\n\n\n
Method 1: Enable SCD on demand in the staging environment<\/h3>\n\n\n\n
.magento.env.yaml<\/code> file in your staging or development environment.<\/li>SCD_ON_DEMAND<\/code> variable in the file.<\/li>SCD_ON_DEMAND<\/code> is enabled and active, you should complete all the steps described in the Smart JS Bundling documentation<\/a>.<\/p>\n\n\n\npr_require_js_module table<\/code> content and paste it into the production database.<\/p>\n\n\n\n
<\/p>\n\n\n\nsetup:static-content:deploy<\/code><\/pre><\/div>\n\n\n\nMethod 2: Enable SCD on demand in the staging environment<\/h3>\n\n\n\n
pr_require_js_module<\/code> table content and paste it into the production environment database.<\/p>\n\n\n\nsetup:static-content:deploy<\/code><\/pre><\/div>\n\n\n\nConclusion<\/h2>\n\n\n\n
pr_require_js_module<\/code> database table.<\/p>\n\n\n\n