Svelte and Rollup：如何导出可以通过AJAX提取，缓存并在多个页面上重复使用的组件？

Question

在我的Svelte + Rollup项目src文件夹中，我有两个子文件夹，即components和pages。让我描述我的梦想，并希望有人可以阐明这是否可能。

1. 组件和页面被导出为它们自己的文件（我通过rollup-plugin-multi-input进行工作）。

2. 当页面被点击时，它会请求它需要的所有组件。

3. 然后将组件JS文件缓存。以后所有需要相同组件的页面调用都将从缓存中提取。

这是合理的，还是单独导出页面并将组件捆绑到每个页面中，复制代码会更好？

另一个潜在的想法

[导入所有组件的App.svelte文件，将它们聚合到一个对象中，将该对象作为道具传递给页面组件，然后对页面中的所有组件进行<svelte:component this={components.Input}>。

App.svelte:

<script>
  import { onMount } from 'svelte';
  import Input from 'Input.svelte';
  import Popup from 'Popup.svelte';
  const components = {Input, Popup};
  let page;
  function getPage(url) {
    /* AJAX call to fetch the page component and set it to the page variable */
  }
  onMount(() => getPage(location.pathname))
</script>

<svelte:component this={page} components>

Page1.svelte:

<script>
  export let components;
</script>

<p>Type your name:</p>
<svelte:component this={components.Input}>

使用此方法，即使用户从不访问包含某些组件的页面，所有组件也都包含在捆绑软件中。

Answer 1

看来您正在谈论某种精巧的手动代码拆分。

当您使用Rollup构建Svelte / Sapper项目时，它将把您的组件，路线等捆绑并打包成一系列较小的JS块，仅在需要时才加载，节省带宽并提高了速度。您不需要为此的多输入插件。

还请注意，由于Svelte是一种编译语言，因此通过AJAX加载组件的计划将行不通，并且不会在用户的浏览器中即时生成和分配内容。

出于好奇，您要挣扎的捆绑包大小是多少？ Svelte已经成为任何前端框架中最小的捆绑，因此您正在做些什么来解决尺寸问题？