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

Question

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

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

<slot>如果我计划在初始加载后对其进行更新，将其用于这样的工作是否效率低下？

Answer 1

从源文本创建组件在技术上是可能的- 例如，REPL会这样做 -因为编译器不在乎它是在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>