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’t advanced enough to achieve optimal results and significantly improve user experience.
Our Magento 2 Page Speed Optimizer extension 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.
Why JS Bundling Setup is Different on Magento Cloud
JS bundle creation on Magento Cloud slightly differs from the advanced JS bundling process in the Plumroclet extension, which is designed for automatic setup in Magento on-premises environments.
The main challenge lies in the Magento Cloud’s 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.
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:
- Enable SCD on demand in the staging environment.
- Use a local development environment.
Setting Up JS Bundles on Magento 2 Cloud
Method 1: Enable SCD on demand in the staging environment
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.
Step 1. Enable Static Content Deployment
First, you should enable static content deployment for this environment on demand. To do this, follow the next steps:
Step-by-step guide:
- Locate the
.magento.env.yamlfile in your staging or development environment. - Enable the
SCD_ON_DEMANDvariable in the file. - Apply new configurations. Please note: this variable has priority over other static content deployment configurations and disables its execution when the environment is deployed.
Step 2. Configure Smart JS Bundling
Then, when SCD_ON_DEMAND is enabled and active, you should complete all the steps described in the Smart JS Bundling documentation.
Step 3. Deploy changes to production
Lastly, after JS bundles are created, we recommend checking if the website functions properly. If everything works as expected, you need to download the pr_require_js_module table content and paste it into the production database.
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:
setup:static-content:deployMethod 2: Enable SCD on demand in the staging environment
Step 1. Set up your local development environment
Set up your local dev environment and make sure it’s up to date and matches the production.
Step 2. Set up JS Bundles on your local environment
At this point, complete all the steps described in the Setting Up JS bundles section of the Magento 2 Page Speed Optimizer extension configurations.
Step 3. Deploy changes to production
After JS bundles are created, we recommend checking if the website functions properly. If everything works as expected, you need to download the pr_require_js_module table content and paste it into the production environment database.
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:
setup:static-content:deployConclusion
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 pr_require_js_module database table.
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.