Magento 2 + Breeze : domptez le JS moderne sans vous battre

Quand on pense à Magento, on imagine tout de suite Knockout, RequireJS, et d’innombrables fichiers XML. Mais avec Breeze Front, l’approche est bien plus douce — et pas seulement côté front-end.

Côté développeurs, Breeze vient en réalité surcharger intelligemment les JS natifs de Magento, sans bouleverser toute la stack. Par exemple, lorsqu’un composant utilise jQuery, Breeze injecte à la place Cash, un clone plus léger de jQuery. Idem pour d’autres librairies JS : Breeze les remplace de manière transparente, et c’est en grande partie ce qui rend ce thème si rapide.

👉 À noter : cette magie ne s’applique pas encore au checkout. Comme Hyvä, Breeze ne gère pas cette partie (du moins sans module complémentaire).

📦 Le cœur de l’intégration : `breeze_default.xml`

Tout se passe via un unique layout XML : breeze_default.xml. L’avantage en développement c’est qu’il suffit d’avoir le cache layout désactivé pour voir vos modifications instantanément.
C’est ici que vous déclarez vos composants JS à intégrer. Exemple :

<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>

🧠 Astuce : utilisez le même nom pour componentName et componentPath. Magento saura résoudre automatiquement le chemin au bon endroit.

⚡️ Chargement différé avec Breeze

L’un des avantages clés de Breeze, c’est la gestion différée des scripts JS. Vous pouvez décider du moment exact où charger un composant, grâce à des instructions comme :

onDom : dès que le DOM est prêt
onInteraction : lors de la première interaction utilisateur (clic, touche clavier…)
onReveal : quand l’élément devient visible
onRequire, onEvent, etc.

Cela permet d’alléger considérablement le poids initial de la page — et d’améliorer votre score PageSpeed comme jamais.

📍 Bonnes pratiques de déclaration

Quand vous créez le fichier JS de votre composant, n’oubliez surtout pas d’y indiquer le nom du composant. Exemple :

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

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

⚠️ En local (dev mode), ça fonctionnera même sans la ligne component. Mais en mode production, ça cassera. Alors autant bien faire les choses tout de suite.

🧱 Et les bundles dans tout ça ?

Breeze propose plusieurs bundles JS prédéfinis, à utiliser selon la page concernée :

default — pour les scripts globaux
product — pour les pages produits
customer — login, dashboard, etc.
checkout — panier / commande
dynamic — si le script ne doit pas être mis en bundle

Utiliser le bon bundle est crucial pour éviter d’alourdir inutilement le JS global.

Conclusion

Breeze rend le JavaScript sur Magento 2 plus moderne, plus léger, et surtout plus logique.
Pas besoin de tout réapprendre : en respectant quelques conventions simples, vous boostez vos perfs sans sacrifier vos habitudes.

Un thème rapide, un système de bundling malin, et une compatibilité bien pensée : Breeze coche toutes les cases.

👉 Envie de découvrir Breeze côté front-end ? On a justement rédigé un article complet sur sa structure HTML, son CSS minimaliste et son approche orientée performance.