מודולי טעינה עצלנית ב-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 היא הטמעה של רכיב "אייקון" יחיד שטוען את האייקון הספציפי לפי דרישה.

<!--
  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 הבאה שלך.