Sapper / Svelte可以有条件地导入组件吗？

问题描述

在Sapper中，我仅尝试在呈现为客户端（使用onMount）时导入组件。是否有类似于React Suspense和React.lazy的东西？还是有另一种方法？

解决方法

您当然可以那样做，是的：

   SEPTEMBER 2020
Su Mo Tu We Th Fr Sa
       1  2  3  4  5
 6  7  8  9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30

Demo here。

或者，您可以将其包装到组件中

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

Demo here。使用此方法的一个警告是，<Loader this={() => import('./Thing.svelte')} answer={42} > <p>some slotted content</p> <p slot="fallback">loading...</p> </Loader> 以外的插槽不会被“转发”到基础组件。