What is RequireJS?

RequireJS is a JavaScript module loader used in Magento 2 to manage JavaScript dependencies and load JS files asynchronously. It follows the AMD (Asynchronous Module Definition) pattern, which helps improve frontend performance and maintainability.

Magento uses RequireJS to organize JavaScript modules, avoid global scope pollution, and ensure scripts are loaded only when needed.

Why Magento Uses RequireJS

• Loads JavaScript files asynchronously.
• Manages dependencies between JS modules.
• Improves page performance.
• Avoids global JavaScript conflicts.
• Supports modular frontend development.

Main RequireJS Configuration File

Magento loads RequireJS configuration from multiple modules and merges them.

(File: app/code/VendorName/ModuleName/view/frontend/requirejs-config.js)

This configuration maps the alias customJs to a JavaScript file.

Using RequireJS in JavaScript

You can load modules using the require() function.

Dependencies are loaded first, then the callback function executes.

Creating a Custom JS Module

(File: app/code/VendorName/ModuleName/view/frontend/web/js/custom.js)

The define() function defines a module and its dependencies.

RequireJS Map Configuration

The map configuration allows overriding or aliasing JavaScript modules.

This allows using customAlias instead of the full module path.

Mixins in RequireJS

RequireJS mixins allow extending existing JavaScript modules without modifying core files.

This attaches a mixin to the checkout shipping component.

Example Mixin File

(File: view/frontend/web/js/shipping-mixin.js)

RequireJS Loading in Magento Layout

You can load JavaScript modules in layout XML.

Common RequireJS Configuration Options

• paths → Define module paths.
• map → Create module aliases.
• shim → Define dependencies for non-AMD scripts.
• deps → Load modules globally.
• config.mixins → Extend existing modules.

Best Practices

• Always use RequireJS instead of global scripts.
• Use mixins to extend core JavaScript modules.
• Keep modules small and reusable.
• Avoid loading unnecessary scripts.
• Use module aliases for cleaner code.