В Sapper я пытаюсь импортировать компонент, только если он отображается на стороне клиента (с использованием onMount
). Есть ли что-то похожее на React Suspense
и React.lazy
? Или есть другой подход?
Sapper / Svelte можно условно ввозить комплектующие?
comment
Я знаю библиотеку под названием svelte-lazy, которая позволяет выполнять ленивую загрузку.
- person johannchopin   schedule 12.09.2020
Ответы (1)
Вы, конечно, можете сделать это таким образом, да:
<script>
import { onMount } from 'svelte';
let Thing;
onMount(async () => {
Thing = (await import('./Thing.svelte')).default;
});
</script>
<svelte:component this={Thing} answer={42}>
<p>some slotted content</p>
</svelte:component>
В качестве альтернативы вы можете обернуть это в компонент:
<!-- Loader.svelte -->
<script>
import { onMount } from 'svelte';
let loader;
let Component;
onMount(async () => {
Component = (await loader()).default;
});
export { loader as this };
</script>
<svelte:component this={Component} {...$$restProps}>
<slot></slot>
</svelte:component>
{#if !Component}
<slot name="fallback"></slot>
{/if}
<Loader
this={() => import('./Thing.svelte')}
answer={42}
>
<p>some slotted content</p>
<p slot="fallback">loading...</p>
</Loader>
Демо здесь. Предостережение при таком подходе состоит в том, что слоты, отличные от default
, не будут «перенаправляться» на базовый компонент.
person
Rich Harris
schedule
12.09.2020