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 />和import('')函数

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

svelteJS 中的动态组件导入

Dynamic component import in svelteJS

dynamic-import

svelte-component

svelte-3