Lusta betöltő modulok a Svelte-ben

Dinamikus import a Svelte-ben

Amikor Svelte-ben kódol, előfordulhat, hogy csak igény szerint kell betölteni az alkatrészeket, amikor valóban szükség van rájuk. A React egészen mesterien oldotta meg ezt a problémát a „Suspense” komponensével. Ha valami hasonlót szeretnél elérni Svelte-ben, jó hírem van számodra.

Karcsú "Suspense" feszültség nélkül

Alapvetően arra van szükség, hogy a Svelte beépített mechanizmusát használja, hogy magában az összetevőben várja az aszinkron függvényhívásokat. A következő egyszerű példa megmutatja, mit értek ezen.

<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}

Amint látja, egyszerűen megvárjuk a függvény visszatérési értékét, majd használjuk a felhasználói felületünkön. Ugyanez a technika használható teljes modulok importálására is.

Dinamikus import a Svelte segítségével

Az ES6-ban elérhető dinamikus „import” segítségével egyszerű lusta komponensimportot írhatunk.

//
// 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>

Erre a tudásra építve ma már képesek vagyunk bármilyen alkatrész lusta betöltésére. Egy gyakorlati példa, amelyet a spikze.club esetében használok, egy „Ikon”-komponens megvalósítása, amely igény szerint betölti az adott ikont.

<!--
  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}

Tekerje fel

Látta már, hogyan használhatja az ES6 dinamikus importálását az adatok igény szerinti importálására. Mivel ez mind az Ön összetevőire, mind a harmadik féltől származó könyvtárakra vonatkozik, semmi sem tart vissza a következő Svelte alkalmazás méretezésétől.