How to minify, merge, bundle of HTML / CSS / JS - Magento Cloud vs. Magento Admin

 1. Changing HTML / CSS / JS settings in Magento Commerce Cloud (B2B)

In Magento Cloud Environments, the process of configuring minify, merge and bundling is slightly different than configuration from Magento Admin settings.

Step 1: Go to the root of your Magento 2 ECE installation, via SSH and export the project configuration using the command below: 

->Environment configuration will be exported under "app/etc/config.php"

->Configuration can be exported using the command below

php vendor/bin/m2-ece-scd-dump

-> If you are having trouble exporting the configuration, more details on how to export environment configurations can be found under Magento 2 Cloud Documentation - Configuration management for store settings.

Step 2: Edit the configuration file you just exported in step 1: "app/etc/config.php" and configure HTML, CSS or JS settings: minify, merge or bundle. 1 - enabled, 0 - disabled. In the exported configuration you might not have variables like 'enable_js_bundling' or 'merge_css_files'. Just add them manually as you can see below. 

Note on JS merge: If you need JS merging, make sure to also activate js bundle or js files will not be merged into one single js file. 

'dev' =>
array (
    'static' =>
    array (
      'sign' => '1',
),
'front_end_development_workflow' =>
array (
   'type' => 'server_side_compilation',
),
'template' =>
array (
   'minify_html' => '0',
),
'js' =>
array (
   'merge_files' => '1',
   'minify_files' => '1',
   'enable_js_bundling' => '1',
   'minify_exclude' => '
                  /tiny_mce/
              ',
   'session_storage_logging' => '0',
   'translate_strategy' => 'dictionary',
),
'css' =>
array (
    'minify_files' => '1',
    'merge_css_files' => '1',
    'minify_exclude' => '
                  /tiny_mce/
              ',
     ),
   ),
),

Step 3: Push the changes above to the corresponding Magento Cloud GIT integration repository

- Make sure to clear all Magento caches, including CSS / JS cache. Also, redeploy static content to avoid missing JS errors. You can achieve this with the SSH commands below:

php bin/magento ca:cl

php bin/magento ca:fl

rm -Rf var/cache/ var/generation/ var/page_cache/ var/view_preprocessed/;

php bin/magento setup:static-content:deploy -f 

Important: Run some speed tests. Bundling JS does not always help as it increases the "Start render" time and "dom content loading" time. These 2 indicators really count on the user experience side. You may want these values as low as possible. If these values are low, the user will "feel" that the site is already loaded while page elements with lower priority are still loading.

Check Page Speed Here: https://www.webpagetest.org

2. Changing HTML / CSS / JS settings from Magento Admin (developer mode)

Normally HTML / CSS / JS minify and merge settings can be configured from Magento Admin, when the store is in developer mode. If the store is in Production mode, the link below will not be visible. 

Store -> Configuration -> Advanced -> Developer > CSS Settings / JavaScript Settings

- Make sure to clear all Magento caches, including CSS/JS cache. Also, redeploy static content to avoid missing JS errors. You can achieve this with the SSH commands below:

php bin/magento ca:cl

php bin/magento ca:fl

rm -Rf var/cache/ var/generation/ var/page_cache/ var/view_preprocessed/;

php bin/magento setup:static-content:deploy -f 

Important: Run some speed tests. Bundling JS does not always help as it increases the "Start render" time and "dom content loading" time. These 2 indicators really count on the user experience side, you may want these values as low as possible. If these values are low, the user will "feel" that the site has already loaded while page elements with lower priority are still loading.

Check Page Speed Here: https://www.webpagetest.org