Lazy loading modules στο Svelte

Δυναμική εισαγωγή στο Svelte

Κατά την κωδικοποίηση στο Svelte, μπορεί να έχετε την απαίτηση να φορτώνετε μόνο εξαρτήματα κατ' απαίτηση, όταν αυτά είναι πραγματικά απαραίτητα. Το React έχει λύσει αυτό το πρόβλημα αρκετά αριστοτεχνικά με το στοιχείο "Suspense" του. Αν θέλεις να πετύχεις κάτι αντίστοιχο στο Svelte, σου έχω καλά νέα.

Σβέλτο «Σασπένς» χωρίς σασπένς

Βασικά αυτό που απαιτείται είναι να χρησιμοποιήσετε τον ενσωματωμένο μηχανισμό του Svelte για να αναμένετε ασύγχρονες κλήσεις λειτουργίας στο ίδιο το στοιχείο. Το ακόλουθο απλό παράδειγμα δείχνει τι εννοώ με αυτό.

<script>
  // Dummy function, just so that we
  // have some async stuff.
	async function getData() {
		await new Promise(res => setTimeout(res, 1000));
		return { key: "value" };
	}
</script>

{#await getData()}
	<p>Fetching data...</p>
{:then res}
	<p>Accessing data: "key": "{res.key}"</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

Όπως μπορείτε να δείτε, απλώς περιμένουμε την επιστρεφόμενη τιμή της συνάρτησης και στη συνέχεια τη χρησιμοποιούμε στη διεπαφή χρήστη μας. Η ίδια τεχνική μπορεί να χρησιμοποιηθεί για την εισαγωγή ολόκληρων μονάδων.

Δυναμική εισαγωγή με Svelte

Χρησιμοποιώντας τη δυναμική «εισαγωγή», που είναι διαθέσιμη στο ES6, μπορούμε να γράψουμε μια απλή εισαγωγή τεμπέλικου στοιχείου.

//
// Live demo:
// https://svelte.dev/repl/b7551180977d4e738b07d428f3172d5e?version=3.46.4
//

//
// App.svelte
// 

<h1>App title</h1>

{#await import("./Content.svelte") then Module}
	<Module.default subtitle="Subtilte as prop" />
{/await}

//
// Content.svelte
//

<script>
	export let subtitle;
</script>

<article>
  <h2>
		Content title
	</h2>
	<h3>
		{subtitle}
	</h3>
	<p>
		Content body.
	</p>
</article>

Βασιζόμενοι σε αυτή τη γνώση, είμαστε πλέον σε θέση να φορτώνουμε με καθυστέρηση οποιοδήποτε στοιχείο. Ένα πρακτικό παράδειγμα που χρησιμοποιώ πραγματικά για το spikze.club είναι η υλοποίηση ενός μόνο στοιχείου "Icon" που φορτώνει το συγκεκριμένο εικονίδιο κατά παραγγελία.

<!--
  Source: https://carbon-icons-svelte.onrender.com/
-->
<script lang="ts">
  // Using a link so that 'clsx' can eliminate
  // all other variant compared to an enum, which
  // should lead to a smaller size at runtime.
  export let variant: "internal-link" | "external-link" | "section-link" | "close" | "add-circle";
  let cn: string = undefined;
  export { cn as class };
</script>

{#if variant === "external-link"}
  {#await import("carbon-icons-svelte/lib/ArrowUpRight20") then Icon}
    <Icon.default class={cn} />
  {/await}
{/if}

{#if variant === "internal-link"}
  {#await import("carbon-icons-svelte/lib/ArrowRight20") then Icon}
    <Icon.default class={cn} />
  {/await}
{/if}

{#if variant === "section-link"}
  {#await import("carbon-icons-svelte/lib/ArrowDown20") then Icon}
    <Icon.default class={cn} />
  {/await}
{/if}

{#if variant === "close"}
  {#await import("carbon-icons-svelte/lib/Close20") then Icon}
    <Icon.default class={cn} />
  {/await}
{/if}

{#if variant === "add-circle"}
  {#await import("carbon-icons-svelte/lib/AddAlt20") then Icon}
    <Icon.default class={cn} />
  {/await}
{/if}

Τύλιξε

Έχετε δει πώς μπορείτε να χρησιμοποιήσετε τη δυναμική εισαγωγή από το ES6 για να εισαγάγετε απλά οποιαδήποτε δεδομένα κατά παραγγελία. Καθώς αυτό ισχύει τόσο για τα στοιχεία σας όσο και για τις βιβλιοθήκες τρίτων, δεν υπάρχει τίποτα που σας εμποδίζει να κλιμακώσετε την επόμενη εφαρμογή Svelte.