Magento 2 RequireJS and Frontend Asset Bundling

Luma’s JavaScript story is RequireJS: AMD modules, per-module HTTP requests, and a configuration system layered in XML. It made sense in 2015; on today’s web it is why Magento themes ship hundreds of requests. You cannot remove RequireJS from Luma, but you can tame it. Here is how the system works and what actually helps.

How requirejs-config.js Works

Each module and theme can ship a requirejs-config.js that Magento merges into one config:

var config = {
    map: {
        '*': {
            'customSlider': 'Acme_Theme/js/slider'
        }
    },
    config: {
        mixins: {
            'Magento_Catalog/js/price-box': {
                'Acme_Theme/js/price-box-mixin': true
            }
        }
    },
    deps: [],
    shim: {}
};

• map aliases module names (and can replace core modules per-scope)
• mixins wrap core JS without copying it - the upgrade-safe extension mechanism
• shim adapts non-AMD legacy scripts
• deps forces eager loading - use sparingly; every dep is main-thread time

The Performance Reality

Luma’s problem is arithmetic: hundreds of AMD modules = hundreds of requests on HTTP/1 assumptions, and heavy main-thread parse on mobile. The levers, honestly assessed:

1. Built-in bundling (dev/js/enable_js_bundling): merges modules into bundles. Better than nothing, but the naive bundler ships everything everywhere - a 4MB bundle on every page is not an improvement

2. Advanced bundling: analyse which modules load on which page type and build per-page bundles (the community tools do this). Real gains, real maintenance cost

3. Defer and lazy-load: move non-critical modules behind interaction or visibility. Cart drawers, sliders, and marketing widgets are candidates; checkout-critical paths are not

4. Remove what you do not use: audit which uiComponents and widgets actually render on your templates. Most stores load dozens that render nothing

Mixins: The Discipline Worth Keeping

Whatever your bundling strategy, keep JS customisations in mixins rather than copied core files. A copied price-box.js from 2.4.3 silently suppresses three years of core fixes; a mixin composes with them.

The Ceiling Conversation

There is an honest ceiling: RequireJS-based frontends cannot match a modern stack’s payload, and per-page bundling is effort spent fighting the platform. When the performance gap to your competitors becomes commercial rather than cosmetic, the conversation is Hyva (which replaces this stack wholesale) - but until then, bundling, deferring and removing dead weight are real, shippable wins.

RequireJS is legacy infrastructure you can manage but not fix. Manage it deliberately: alias cleanly, extend via mixins, bundle by page type, and measure on real mobile devices - then have the Hyva conversation with full information.