وحدات التحميل الكسولة في Svelte

الاستيراد الديناميكي في Svelte

عند الترميز في Svelte ، قد يكون لديك مطلب لتحميل المكونات فقط عند الطلب ، عندما تكون هناك حاجة إليها بالفعل. تمكنت React من حل هذه المشكلة ببراعة تامة باستخدام مكون "التشويق" الخاص بها. إذا كنت ترغب في تحقيق شيء مشابه في 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 التالي.