Bundling and Minification

Merging, bundling and minification are three separate settings, all off in developer mode, which is why your storefront loads hundreds of files.

Syntaxbin/magento config:set dev/js/enable_js_bundling 1

In developer mode RequireJS fetches every module as its own request. Two hundred or more JavaScript requests on a product page is the expected behaviour there, not a fault. Nothing is combined and nothing is minified. Three independent settings change that, and all three are stored as ordinary configuration under dev/js.

The three settings

Merge, dev/js/merge_files: concatenates the files a given page requests into one file.
Bundle, dev/js/enable_js_bundling: during static content deployment, groups all deployed JavaScript and HTML templates into numbered files under pub/static/frontend/Vendor/theme/en_US/js/bundle/. It requires production mode, and merging must be off, because merging excludes bundling.
Minify, dev/js/minify_files: strips whitespace and comments at deployment time. The admin field states plainly that minification is not applied in developer mode.

What bundling actually costs

The bundles contain everything deployed for the theme, so every page downloads all of it whether it needs it or not. The first visit is slower, later visits are fast from cache. Measure before and after rather than assuming a gain. Adobe also publishes Baler, a separate experimental bundler that is not part of the 2.4.9 release.

Applying a change

These are deployment-time decisions, so a change needs bin/magento setup:static-content:deploy -f and bin/magento cache:clean config. During development, --no-js-bundle skips bundle generation and shortens the deploy considerably.

Example

# run from the Magento root

# Bundling only takes effect in production mode.
bin/magento deploy:mode:set production

# Merging excludes bundling, so turn it off first.
bin/magento config:set dev/js/merge_files 0
# Value was saved.

bin/magento config:set dev/js/enable_js_bundling 1
# Value was saved.

bin/magento config:set dev/js/minify_files 1
# Value was saved.

# Version the static URLs so browsers pick up the new bundles.
bin/magento config:set dev/static/sign 1
# Value was saved.

# Bundles are built here, not at request time.
bin/magento setup:static-content:deploy -f en_US

bin/magento cache:clean config

# Result: pub/static/frontend/Vendor/theme/en_US/js/bundle/ now holds
# bundle0.js, bundle1.js and so on, and the storefront loads those
# instead of hundreds of individual module files.

When to use it

Explain to a client why the storefront requests hundreds of scripts on the development server.
Turn on bundling and minification for a release build and measure the result.
Store the frontend build flags in config.php so every environment deploys the same way.
Shorten a static content deploy while iterating on templates in production mode.

More examples

Where the values end up

Dumping these to config.php makes the build reproducible and stops someone changing them in the admin on one environment only. It is the usual arrangement once a project has a CI pipeline.

<?php
// app/etc/config.php (after bin/magento app:config:dump)

return [
    'system' => [
        'default' => [
            'dev' => [
                'js' => [
                    'merge_files' => '0',
                    'enable_js_bundling' => '1',
                    'minify_files' => '1',
                ],
                'static' => [
                    'sign' => '1',
                ],
            ],
        ],
    ],
];

// Values dumped into config.php become read-only in the admin and travel
// with the repository, which is what you want for a build setting.
// On deploy they are applied by: bin/magento app:config:import

Checking what mode you are actually in

Run these two before investigating why bundling seems to have no effect. The usual answer is that the configuration is correct and the mode is developer, not that the deploy failed.

bin/magento deploy:mode:show
# Current application mode: developer.

# Minification and bundling are inert in developer mode regardless of the
# stored configuration, so a long list of script requests here is normal.

bin/magento config:show dev/js/enable_js_bundling
# dev/js/enable_js_bundling - 1

Skipping bundle generation during development

Useful on a staging box where you must reproduce production mode but are only changing templates. The warning matters: these flags leave gaps in pub/static, so the release build must be a complete deploy.

# A full deploy with bundling is slow. While iterating on a theme in
# production mode, skip the bundle step:
bin/magento setup:static-content:deploy -f en_US --no-js-bundle

# Related switches that cut deploy time when you know what changed:
#   --no-css    skip CSS
#   --no-less   skip Less compilation
#   --no-images skip images
#   --no-fonts  skip fonts
#
# Run one full deploy with no exclusions before shipping, or the
# storefront serves a partial static directory.

Discussion

Be the first to comment on this lesson.