Chunking von gemeinsam genutzten JS-Abhängigkeiten

Eine wichtige Optimierung, die erforderlich ist, damit Vorlagen- und Layout-Bundles erfolgreich sind, besteht darin, gemeinsam genutzte Abhängigkeiten zwischen Bundles in separate Blöcke aufzuteilen.
Dies reduziert die Menge an doppeltem Code, die in jedem Bundle enthalten ist, und verbessert die Leistung beim Laden von Seiten weiter.

Fahren wir mit der Dateistruktur aus dem vorherigen Beispiel fort und sehen, wie gemeinsam genutzte Abhängigkeiten getrennt werden:

index.js

@import depA from ‚depA‘;
@import depB from ‚depB‘;

product.js

@import depB from ‚depB‘;
@import depC from ‚depC‘;

Im obigen Beispiel haben wir 2 Dateien, die jeweils 2 Abhängigkeiten importieren. Beide Dateien haben eine gemeinsame Abhängigkeit depB.
Die resultierenden generierten Dateien sind:

template.index.js: Code, der nur für die Indexvorlage verwendet wird.
template.product.js: Code, der nur in der Produktvorlage verwendet wird.
template.index@template.product.js: Code, der sowohl für Index- als auch für Produktvorlagen verwendet wird.

Quelle:

https://shopify.github.io/slate/docs/template-and-layout-bundles#shared-js-dependencies-chunking