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

我看过[<svelte:component>]（here）的文档，但是看起来我在编译时不得不import所有可能的模板。

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

如果我计划在初始加载后对其进行更新，使用<slot>这样的代码效率低下吗？

最佳答案

从源文本（例如the REPL does it）创建组件在技术上是可能的，因为编译器并不关心它是在Node还是在浏览器中运行。但这绝对不推荐！ （由于编译器有些大，因此将无法使用Svelte。）

相反，如果您使用汇总（带有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>