# Dynamic Imports

# Optimierungstechniken in hubble

In hubble werden Komponenten, Middleware und Plugins unter Anwendung von Lazy Loading Techniken implementiert. Dies gewährleistet, dass nur Resourcen wie JS und Bilder geladen werden, die auch auf der aktuellen Seite verwendet werden, was wiederum zu kurzen Ladezeiten führt.

Technisch basiert die Lösung auf dem Prinzip, dass Webpack anhand von import Anweisungen das JS in separate Dateien aufteilt (code splitting / chunking). So wird der Chunk bzw. die JS Datei nur dann geladen, wenn diese aktiv importiert wird.

Für Routen bzw. Seiten erstellt NuxtJS automatisch Chunks. Das dynamische Importieren von Komponenten innerhalb eines Layouts oder einer Seite muss man selbst beim programmieren berücksichtigen.

# Dynamisches importieren von JS

# Dynamisches importieren von Vue Komponenten

Um eine Vue.js Komponente dynamisch zu laden, reicht es sie auf folgende Art und Weise einzubinden:

components: {
    <COMPONENT-NAME>: () => import('~/components/<COMPONENT-PATH>')
}
1
2
3

# Dynamisches importieren von Middleware

Für die Einbindung von Middleware, die nicht von allen Seiten verwendet wird, eignet sich die Verwendung einer anonymen Middleware (opens new window). Anstatt die Middlware als String in der Middleware zu definieren wird sie via import Funktion eingebunden:

// ~/pages/index.vue
import myAnonymousMiddleware from '@hubblecommerce/hubble/core/anonymous-middleware/myAnonymousMiddleware';

export default {
    // ...
    middleware: [
        myAnonymousMiddleware
    ]
    // ...
}
1
2
3
4
5
6
7
8
9
10

# Dynamisches importieren von Plugins

In NuxtJs ermöglichen es sogenannte Plugins externe JS Bibliotheken und Module leicht einzubinden und diese in global im App Kontext zur Verfügung zu stellen: Ein gutes Beispiel für eine Funktionalität, die global auf jeder Seite verfügbar sein muss, ist die FlashMessages Komponente.

Durch das Einbinden dieser in der ~/modules/@hubblecommerce/hubble/core/plugins/global.js , ist es nicht mehr notwendig, in jedem Layout ein import Statement für die FlashMessages Komponente hinzuzufügen.

NuxtJs empfiehlt Code von Drittanbietern via Plugins zu installieren. Doch Vorsicht: Nicht alle Plugins werden auf allen Seiten benutzt, daher ist es nicht effizient diese global einzubinden.

Aus diesem Grund findet die Plugin Initialisierung bei hubble nicht in dem Modulordner ~/modules/@hubblecommerce/hubble/core/plugins/ statt. Stattdessen wird das jeweilige Plugin nur in dem created Hook der Komponente initialisiert, die das Plugin auch wirklich benutzt.

import vClickOutside from "v-click-outside";

export default {
    // ...
    created() {
        Vue.use(vClickOutside);
    },
    // ...
}
1
2
3
4
5
6
7
8
9

Desweiteren kann es sein, dass nur Teile einer Drittanbieter Library genutzt werden. Aus diesem Grund, ist es wichtig Tree-Shaking für Vendor Bibliotheken zu aktivieren, um die Bundlegröße zu verkleinern sofern diese Tree Shaking unterstützen. Zum Beispiel, verfügt die Lodash Bibliothek (opens new window) über viele Helper-Funktionen für Arrays und Objekte und kann durch Tree-Shaking mit Hilfe von babel-plugin-lodash (opens new window) verkleinert werden, indem nur verwendete Funktionen im finalen Export eingebunden werden.

Die von hubble verwendeten Plugins befinden sich in dem folgenden Ordner:

~/modules/@hubblecommerce/hubble/core/plugins
1

Mehr über Plugins im Kontext von NuxtJS: Plugins in NuxtJS (opens new window)

# Nicht genutztes JS identifizieren

Der folgende Befehl ermöglicht es, das JS der App zu analysieren, die webpack (opens new window) erstellt. Es wird eine visuelle Representation der Chunks, mit Hilfe des webpack-bundle-analyzer (opens new window), erstellt:

npx nuxt build --analyze
1

NuxtJS unterstüzt die Analyse von builds, wodurch eine Konfiguration über die nuxt.config.js möglich ist. Mehr zur build Eigenschaft in der offiziellen NuxtJS API Dokumentation (opens new window).