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

Question

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

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

<slot>如果我打算在初始加载后更新它，那么使用这样的东西效率会低吗？

Answer 1

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

相反，如果您使用 Rollup (with experimentalDynamicImportand 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>