Svelte'de tembel yükleme modülleri

Svelte'de dinamik içe aktarma

Svelte'de kod yazarken, bileşenleri gerçekten ihtiyaç duyulduğunda yalnızca talep üzerine yükleme gereksiniminiz olabilir. React, “Suspense” bileşeni ile bu sorunu oldukça ustaca çözmüştür. Svelte'de de benzer bir şey elde etmek istiyorsanız size iyi bir haberim var.

Gerilim olmadan Svelte "Gerilim"

Temel olarak gerekli olan, bileşenin kendisinde zaman uyumsuz işlev çağrılarını beklemek için Svelte'nin yerleşik mekanizmasını kullanmaktır. Aşağıdaki basit örnek bununla ne demek istediğimi gösteriyor.

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

Gördüğünüz gibi, sadece işlevin dönüş değerini bekliyoruz ve ardından onu kullanıcı arayüzümüzde kullanıyoruz. Aynı teknik, tüm modülleri içe aktarmak için kullanılabilir.

Svelte ile dinamik içe aktarma

ES6'da bulunan dinamik "içe aktarma"yı kullanarak basit bir tembel bileşen içe aktarma yazabiliriz.

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

Bu bilgiye dayanarak, artık herhangi bir bileşeni tembel olarak yükleyebiliriz. Aslında spikze.club için kullandığım pratik bir örnek, talep üzerine belirli simgeyi yükleyen tek bir "Simge" bileşeninin uygulanmasıdır.

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

Sarmak

Talep üzerine herhangi bir veriyi basitçe içe aktarmak için ES6'dan dinamik içe aktarmayı nasıl kullanacağınızı gördünüz. Bu, hem bileşenleriniz hem de üçüncü taraf kitaplıkları için geçerli olduğundan, sizi bir sonraki Svelte uygulamanızı ölçeklendirmekten alıkoyan hiçbir şey yoktur.