Magento 2 + Breeze: Tame Modern JS Without a Fight

When you think of Magento, you immediately imagine Knockout, RequireJS, and countless XML files. But with Breeze Front, the approach is much smoother—and not just on the front end.

On the developer side, Breeze actually intelligently overrides Magento’s native JS, without disrupting the entire stack. For example, when a component uses jQuery, Breeze injects Cash, a lighter jQuery clone, instead. The same goes for other JS libraries: Breeze replaces them seamlessly, and that’s a big part of what makes this theme so fast.

👉 Note: This magic doesn’t yet apply to checkout. Like Hyvä, Breeze doesn’t handle this part (at least not without an add-on).

📦 The heart of integration: breeze_default.xml

Everything happens via a single XML layout: breeze_default.xml. The advantage in development is that you just need to have the layout cache disabled to see your changes instantly.
This is where you declare your JS components to be integrated. Example :

<referenceBlock name="breeze.js">
  <arguments>
    <argument name="bundles" xsi:type="array">
      <item name="default" xsi:type="array">
        <item name="items" xsi:type="array">
          <item name="%componentName%" xsi:type="array">
            <item name="path" xsi:type="string">%componentPath%</item>
          </item>
        </item>
      </item>
    </argument>
  </arguments>
</referenceBlock>

🧠 Tip: Use the same name for componentName and componentPath. Magento will automatically resolve the path to the correct location.

⚡️ Lazy loading with Breeze

One of Breeze’s key benefits is its deferred handling of JS scripts. You can decide exactly when to load a component, using instructions like:

• onDom : as soon as the DOM is ready
• onInteraction : during the first user interaction (click, keyboard key, etc.)
• onReveal : when the element becomes visible
• onRequire, onEvent, etc.

This significantly reduces the initial page weight — and improves your PageSpeed ​​score like never before.

📍 Good reporting practices

When you create the JS file for your component, don’t forget to include the name of the component. For example:

define(['uiComponent'], (Component) => {
  'use strict';

  return Component.extend({
    component: 'Vendor_Module/js/component', // obligatoire !
    create: function () {
      console.log(this.element);
    }
  });
});

⚠️ In local mode (dev mode), it will work even without the component component. But in production mode, it will break. So we might as well do things right from the start.

🧱 And what about bundles?

Breeze offers several predefined JS bundles, to be used depending on the page concerned:

• default — for global scripts
• product — for product pages
• customer — login, dashboard, etc.
• checkout — basket / order
• dynamic — if the script should not be bundled

Using the right bundle is crucial to avoid unnecessarily weighing down the overall JS.

Conclusion

Breeze makes JavaScript on Magento 2 more modern, lighter, and above all more logical.

No need to relearn everything: by following a few simple guidelines, you can boost your performance without sacrificing your habits.

A fast theme, a smart bundling system, and well-thought-out compatibility: Breeze ticks all the boxes.

👉 Want to learn more about Breeze’s front-end? We’ve written a comprehensive article on its HTML structure, minimalist CSS, and performance-oriented approach.