من نتوانستم هیچ راه حل کارآمدی برای این کار آنلاین پیدا کنم، بنابراین فکر کردم وقتی آن را شروع کردم به اشتراک بگذارم.
مشکل: اجزای ناهمزمان
من به یک صفحه تعمیر و نگهداری نیاز داشتم که در صورت فعال شدن، کل سایت را در اختیار بگیرد، اما بارگذاری آن در هر بازدید از صفحه بیهوده به نظر می رسید. کامپوننت فقط باید زمانی بارگیری شود که واقعاً مورد نیاز باشد.
راه حل: ترکیب {#wait} با Dynamic Imports
این {#await} بلوک در Svelte به شما امکان می دهد وعده ها را مستقیماً در قالب خود انجام دهید. آن را با پویا جفت کنید import() برای بارگذاری تنبل، و شما یک راه مختصر و واضح برای مدیریت اجزای همگام دارید.
این هم کد:
// info.maintenance (boolean) && info.maintenance_ends (timestamp)
export let info;
const MaintenanceComponent = info?.maintenance
? import("$lib/components/Maintenance.svelte")
: null;
{#if MaintenanceComponent}
{#await MaintenanceComponent then M}
{@const Maintenance = M.default}
time={info.maintenance_ends} />
{:catch error}
Failed to load maintenance page: {error.message}
{/await}
{/if}
اینجا چه خبر است؟
-
واردات پویا: من استفاده کردم
import()برای بارگیریMaintenance.svelteجزء به صورت ناهمزمان این اطمینان حاصل می کند که مؤلفه فقط زمانی بارگذاری می شود که حالت تعمیر و نگهداری روشن است. -
{#await}مسدود کردن: این بلوک به من اجازه می دهد که منتظر واردات باشم. -
{@const}: Svelte 5 معرفی می کند{@const}درون بلوک های قالب، که به شما امکان می دهد صادرات پیش فرض را استخراج کنید (M.default) به یک متغیر محلی.
برای یک نکته: عملیات ناهمگام را دور نگه دارید $effect Runes – آنها به خوبی با هم بازی نمی کنند، و TypeScript به شما در مورد آن اطلاع می دهد.
هک مبارک!
