Code-Aufteilung in Svelte JS + Routify

Blog

Code-Splitting ist ein ausgefallener Name für dynamische Importe in ECMAScript (ES) .



Dies ist eine empfohlene Option, wenn Sie größere clientseitige Apps erstellen, die auf verschiedenen Geräten schneller ausgeführt werden müssen.

Java-Script-Telefonnummernvalidierung

In diesem Artikel sehen Sie einen experimentellen Weg, wie wir Code-Splitting durchführen können.



Das Ziel ist nicht, etwas herunterzuladen oder auszuführen, das der Benutzer nicht möchte.

Aufrollen unterstützt Code-Splitting in Form von dynamischen Importen.



Sie müssen nur das Rollup so konfigurieren, dass es alle dynamischen Importe aufteilt.

Die beste Technik ist zu Teilen Sie den Code auf Router-Ebene auf.

Weiterleiten ist ein vielversprechender dateibasierter Router, der als Option dynamische Importe unterstützt. Es ist also gut, basierend auf unseren Anwendungsanforderungen verwendet zu werden.

Bevor Sie mit der eigentlichen Konfiguration beginnen, sehen Sie sich einige grundlegende Dinge an.

Statische vs. dynamische Importe

Statische Importe werden auf oberster Ebene aufgerufen und beim Bauen gierig aufgelöst.

//Static ES import import Card from '../components/Card.svelte'; //svelte template can be used as component

Dynamische Importe werden wie eine Funktion aufgerufen und geben ein Promise zurück, dies erzeugt beim Bündeln einen eigenen Chunk. Dies kann als Code-Splitting bezeichnet werden.

//Dynamically load component on demand (lazy load) let Card; import('../components/Card.svelte') .then(result => Card = result.default); // this will be used {#if Card} {/if}

Dieses Ergebnis-Rollup teilt die Datei als Card-[hash].js (siehe Dokumente )

Arten der Codeaufteilung

Der Code kann auf zwei Arten aufgeteilt werden.

1. Router- oder Seitenebene (empfohlen) – Dies können mehrere Komponenten sein, die auf einer einzigen Seite geladen werden können.

2. Komponentenebene oder Dateiebene (temporär) – Dies kann die einzelne Komponente bei Bedarf laden, was als Lazy Load bei der Benutzeraktion bezeichnet werden kann.

roku anmelden nocc

Anti-Muster

Dort sind einige NICHT Dinge, die als Anti-Muster auf verschiedenen Frameworks angesehen werden.

  • Automatisiertes Way-Code-Splitting aller Komponenten
  • Bibliotheken haben ihre eigene Codeaufteilung

Weil wir das Ziel und den tatsächlichen Anwendungsfall von Code-Splitting verstehen müssen.

#svelte-3 #javascript #routify #rollup #code-splitting #programmierung

levelup.gitconnected.com

Code-Aufteilung in Svelte JS + Routify

Teilen Sie unseren Code in kleinere Abschnitte auf und verbessern Sie die Seitenladezeit in größeren clientseitigen Anwendungen. Code-Splitting ist ein ausgefallener Name für dynamische Importe in ECMAScript (ES). Dies ist eine empfohlene Option, wenn Sie größere clientseitige Apps erstellen, die auf verschiedenen Geräten schneller ausgeführt werden müssen. In diesem Artikel sehen Sie einen experimentellen Weg, wie wir Code-Splitting durchführen können.