Svelte 5의 비동기 구성 요소에 대한 간단한 가이드

온라인에서 이에 대한 작동하는 솔루션을 찾을 수 없어서 작동하게 되면 공유하려고 생각했습니다.

문제: 비동기식 구성 요소

활성화되면 전체 사이트를 차지하는 유지 관리 페이지가 필요했지만 페이지를 방문할 때마다 로드하는 것은 낭비 같았습니다. 구성요소는 실제로 필요할 때만 로드되어야 합니다.

해결책: {#await}와 동적 가져오기 결합

Svelte의 {#await} 블록을 사용하면 템플릿에서 바로 Promise를 처리할 수 있습니다. 지연 로딩을 위해 이를 동적 import()와 결합하면 비동기 구성 요소를 처리하는 간결하고 명확한 방법을 얻게 됩니다.

코드는 다음과 같습니다.

<script>
  // info.maintenance (boolean) && info.maintenance_ends (timestamp)
  export let info;
   const MaintenanceComponent = info?.maintenance 
    ? import("$lib/components/Maintenance.svelte")
    : null;
</script>

{#if MaintenanceComponent}
  {#await MaintenanceComponent then M}
    {@const Maintenance = M.default}
    <Maintenance time={info.maintenance_ends} />
  {:catch error}
    <p>Failed to load maintenance page: {error.message}</p>
  {/await}
{/if}

여기서 무슨 일이 일어나고 있는 걸까요?

• 동적 가져오기: 저는 import()를 사용하여 Maintenance.svelte 구성 요소를 비동기적으로 로드했습니다. 이렇게 하면 유지 관리 모드가 켜져 있을 때만 구성 요소가 로드됩니다.
• {#await} 블록: 이 블록을 사용하면 가져오기를 기다릴 수 있습니다.
• {@const}: Svelte 5에서는 템플릿 블록 내에 {@const}를 도입하여 기본 내보내기(M.default)를 로컬 변수로 추출할 수 있습니다.

전문가 팁: $효과 룬에서 비동기 작업을 수행하지 마세요. 함께 잘 작동하지 않으며 TypeScript에서 이에 대해 알려줍니다.

해킹을 즐겨보세요!

위 내용은 Svelte 5의 비동기 구성 요소에 대한 간단한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!