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}

보시다시피, 우리는 단순히 함수의 반환 값을 기다린 다음 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 앱을 확장하는 데 방해가 되는 것은 없습니다.