是否可以在运行时动态加载 Svelte 模板？

Question

我查看了[<svelte:component>] (here) 的文档，但看起来我必须在编译时import 所有可能的模板。

是否可以在 Svelte 中根据用户操作从 fetch() 调用中加载任意数量的任意模板？然后往里面注入数据？

如果我打算在初始加载后更新它，那么使用 <slot> 会不会效率低下？

Answer 1

从源文本创建组件在技术上是可行的——例如the REPL does it——因为编译器并不关心它是在 Node 中运行还是在浏览器中运行。但绝对不推荐！ （它会破坏使用 Svelte 的目标，因为编译器有点大。）

相反，如果您使用 Rollup（使用 experimentalDynamicImport 和 experimentalCodeSplitting）或 webpack，您可以动态导入组件本身：

<button on:click="loadChatbox()">
  chat to a customer service representative
</button>

{#if ChatBox}
  <svelte:component this={ChatBox}/>
{/if}

<script>
  export default {
    methods: {
      async loadChatbox() {
        const { default: Chatbox } = await import('./Chatbox.html');
        this.set({ Chatbox });
      }
    }
  };
</script>