Panduan ringkas kepada Komponen Async dalam Svelte 5

Saya tidak menemui sebarang penyelesaian yang berkesan untuk perkara ini dalam talian, jadi saya terfikir untuk mengongsinya apabila saya berjaya mendapatkannya.

Masalahnya: Komponen Asynchronous

Saya memerlukan halaman penyelenggaraan yang akan mengambil alih keseluruhan tapak apabila didayakan, tetapi memuatkannya pada setiap lawatan halaman kelihatan membazir. Komponen hanya boleh dimuatkan apabila benar-benar diperlukan.

Penyelesaian: Menggabungkan {#await} dengan Import Dinamik

Blok {#await} dalam Svelte membolehkan anda mengendalikan janji terus dalam templat anda. Pasangkan itu dengan import dinamik() untuk pemuatan malas, dan anda mempunyai cara yang ringkas dan jelas untuk mengendalikan komponen tak segerak.

Ini kodnya:

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

Apa yang berlaku di sini?

• Import Dinamik: Saya menggunakan import() untuk memuatkan komponen Maintenance.svelte secara tidak segerak. Ini memastikan komponen hanya dimuatkan apabila mod penyelenggaraan dihidupkan.
• {#await} Blok: Blok ini membolehkan saya menunggu import.
• {@const}: Svelte 5 memperkenalkan {@const} dalam blok templat, yang membolehkan anda mengekstrak eksport lalai (M.default) ke dalam pembolehubah setempat.

Petua Pro: Jauhkan operasi async daripada rune $effect – ia tidak bermain dengan baik bersama-sama dan TypeScript akan memberitahu anda tentangnya.

Selamat Menggoda!

Atas ialah kandungan terperinci Panduan ringkas kepada Komponen Async dalam Svelte 5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!