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

在 Sapper 中，我仅在客户端渲染时才尝试导入组件（使用onMount）。有没有类似React的东西Suspense and React.lazy？或者还有其他方法吗？

你当然可以这样做，是的：

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

演示在这里 https://svelte.dev/repl/16b375da9b39417dae837b5006799cb4?version=3.25.0.

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

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

演示在这里 https://svelte.dev/repl/c2f6ef6b1b194467945d5f9c48b779b8?version=3.25.0。这种方法的一个警告是，除了default不会被“转发”到底层组件。