svelteJS 中的动态组件导入

Question

我正在将 SvelteJs 与 svelte-spa-router 一起使用。

我有我的案例

<script>
import Component1 from './Component1.svelte'
import Component2 from './Component2.svelte'
</script>

    {#if condition}
       <Component1 {...props1} />
    {:else}
       <Component2  {...props2} />
    {/if}

我有更好的方法可以做到这一点吗？我可以仅在满足条件时动态导入和渲染组件吗？

Answer 1

我认为您需要做的就是所谓的“延迟加载”，即仅在需要渲染时才加载组件。

这个概念可以在 svelte 中使用，你只需要<svelte:component />andimport('')函数

// Component.svelte
<div>
    Hello world
</div>

让我们动态导入该组件

<script>
    export let props = {}
    export let condition = false
</script>

{#await import('./Component.svelte') then value }
    <svelte:component this={value.default} {...props} />
{/await}

让我们添加一个条件

{#if condition}
  {#await import('./Component.svelte') then value }
        <svelte:component this={value.default} {...props} />
    {/await}
{/if}

现在，只有满足条件，组件才会被导入

你检查一下这个REPL