Question

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

组件和页面作为自己的文件导出（我通过rollup-plugin-multi-input进行了操作）。
当页面被点击时，它会请求它需要的所有组件。
然后将组件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已经成为任何前端框架中最小的捆绑，那么您正在做些什么来解决尺寸问题？

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

另一个潜在的想法

1 个答案: