Svelte . में आलसी लोडिंग मॉड्यूल

Svelte . में गतिशील आयात

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}

जैसा कि आप देख सकते हैं, हम बस फ़ंक्शन के रिटर्न वैल्यू की प्रतीक्षा करते हैं और फिर इसे हमारे UI में उपयोग करते हैं। पूरे मॉड्यूल को आयात करने के लिए एक ही तकनीक का उपयोग किया जा सकता है।

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 ऐप को स्केल करने से आपको कोई रोक नहीं सकता है।