Dynamische Imports mit Alpine.js

In diesem Artikel zeigen wir, wie man mit Alpine.js dynamische Importe implementiert, diese mit der Intersection Observerver API verzögert lädt und damit die Erreichbarkeit der eigenen Seite und Inhalte verbessert.

Einrichtung

Für diese Demonstration verwenden wir unsere Astro Boilerplate, die wir bereits in einem früheren Artikel ausführlich vorgestellt haben.

Wenn unsere Boilerplate nicht das Richtige für dich ist, ist das kein Problem. Die Schritte zur Implementierung von dynamischen Importen funktionieren in jedem Projekt mit Alpine.js.

In den folgenden Schritten installieren wir die benötigten Dependencies für die spätere Implementierung von dynamischen Importen.

Neben alpinejs benötigen wir auch @alpinejs/intersect, ein Plugin in Form eines komfortablen Wrappers für den Intersection Obeserver:

npm install alpinejs @alpinejs/intersect

Zur Demonstration des dynamischen Imports verwenden wir Chart.js, eine einfache Bibliothek zur Visualisierung von Diagrammen über das <canvas>-Element:

npm install chart.js

Nach erfolgreicher Installation aller Dependencies, können wir unsere Entwicklungsumgebung starten – im Beispiel unserer Astro Boilerplate mit npm run dev:

npm run dev

Vorbereitung des HTML

Um Chart.js im Frontend zu visualisieren und unsere Implementierung später nachvollziehen zu können, platzieren wir ein <canvas>-Element mit den folgenden Attributen:

<canvas id="chart" x-data="chart" x-intersect.once="once"></canvas>

Implementierung von Chart.js

In unserer Demonstration folgen wir dem Beispiel des Getting Started Guide von Chart.js und implementieren ein einfaches Balkendiagramm innerhalb unserer Methode chart().

Ausgehend von chart(), registrieren wir die asynchrone Methode once(), die wir bereits in unserem <canvas>-Element referenziert haben.

Innerhalb von once() importieren wir Chart und registerables asynchron aus dem chart.js Package und registrieren alle benötigten Module von Chart.js über Chart.register(...registerables).

Schließlich wird das Balkendiagramm mit einem rudimentären Datensatz implementiert. Weitere Informationen zur Funktionalität von Chart.js findenst du in der entsprechenden Dokumentation.

export const chart = () => ({
  async once() {
    const { Chart, registerables } = await import("chart.js")
    Chart.register(...registerables)

    const context = document.getElementById('chart')! as HTMLCanvasElement
    
    new Chart(context, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    })
  }
})

Konfiguration von Alpine.js

Aus Gründen der Übersichtlichkeit haben wir die Methode chart() in eine eigene Datei ausgelagert, die wir nun bei der Initialisierung von Alpine referenzieren müssen.

Bevor wir jedoch unsere Methode in Alpine referenzieren können, müssen wir das intersect-Plugin initialisieren. Mit Alpine.plugin(intersect) kann das importierte Plugin initialisiert und über Alpine verfügbar gemacht werden.

Schließlich fügen wir die Direktive Alpine.data("chart", chart) zum EventListener "alpine:init" hinzu.

import Alpine from "alpinejs";
import intersect from "@alpinejs/intersect"
import { chart } from "./alpine/chart";

Alpine.plugin(intersect)

document.addEventListener("alpine:init", () => {
  Alpine.data("chart", chart)
});

Alpine.start();

Unser Pattern für die Entwicklung mit Alpine.js haben wir erstmals in unserem Artikel Temporäres und persistentes State Management mit Alpine.js vorgestellt.

Ergebnisse verifizieren

Haben wir alle Anpassungen vorgenommen, können wir unsere gewünschten Ergebnisse mit der Netzwerkanalyse der Browser Dev Tools verifizieren.

In unserem Szenario wird die Bibliothek von Chart.js nur dann über once() geladen, wenn das <canvas>-Element zum ersten Mal in den Viewport eintritt.

Unter der Annahme, dass wir die gesamte Bibliothek für unser Projekt benötigen, haben wir mit dieser Implementierung den initialen Transfer um ~70 kB (gzip) reduziert.

Weitere Möglichkeiten

Die Implementierung von Chart.js ist nur eines von vielen Beispielen, in denen dynamische Importe dazu beitragen, den initialen Transfer einer Website zu reduzieren und Inhalte schneller zugänglich zu machen.

Diese Funktion ist nicht auf Bibliotheken beschränkt. Sie kann mit geringem Mehraufwand auch für komplexere Komponenten oder größere Datensätze genutzt werden.

In einem weiteren Schritt kann das Laden dieser Inhalte mit einer Ladeanimation überbrückt werden, die über ein Datenobjekt in Alpine gesteuert wird.

TL;DR

In diesem Artikel haben wir demonstriert, wie man mit Alpine.js und der Intersection Observerver API das Laden von Bibliotheken wie Chart.js verzögert, bis sie benötigt werden, was die Ladezeit und die Benutzererfahrung verbessert.