如何在使用 [slug].svelte 时生成单独的 js 文件

Question

我正在使用sapper构建一个由许多子页面组成的站点，每个子页面都使用不同的svelte组件(带有svg可视化(，我计划将其导出为静态站点。现在我正在使用 [slug].svelte 文件来轻松路由子页面。

我的问题是，当我导出网站时，它会生成一个巨大的 [slug]......JS文件，似乎包含子页面可视化的所有数据。使用 [slug].svelte 时，有没有办法为每个子页面获取更小/单个 js 文件？

似乎我可以通过为每个子页面创建一个文件夹来手动创建路由，从而生成单独的 js 文件。也许问题是我正在导入单个_select.svelte文件中的所有组件，以便为每个子页面选择正确的苗条组件。我试图动态导入组件，希望这会为每个子页面生成不同的 js 文件，但随后静态站点生成将不起作用。我可能在这里做错了什么可怕的事情......

感谢您的任何提示！

Answer 1

在两种情况下创建代码拆分入口点：

• .svelte或.js文件被视为路由(如[slug].svelte(
• 使用动态导入

听起来你想要第二个选项：

<script>
const imports = {
a: () => import('./A.svelte'),
b: () => import('./B.svelte'),
c: () => import('./C.svelte')
};
export let component = 'a';
</script>
{#await imports[component]() then module}
<svelte:component this={module.default}/>
{/await}

在这里演示。

请注意，你必须详细说明所有不同的import(...)可能性——你不能做这种事情......

<script>
const imports = {
a: './A.svelte',
b: './B.svelte',
c: './C.svelte'
};
export let component = 'a';
$: promise = import(imports[component]);
</script>
{#await promise then module}
<svelte:component this={module.default}/>
{/await}

。因为捆绑器需要能够在构建应用程序时"看到"动态导入的文件。

Answer 2

有两种不同的技术，我不知道哪一种最适合。苗条的应用程序通常作为单个bundles.js文件提供。这将包含您在苗条文件上的任何位置导入的所有代码，并且它可能很大。

如果要优化应用程序的加载时间，则可能需要代码拆分(动态导入(。这里有一个很好的答案：https://stackoverflow.com/a/60026703/105224

另一种方法是使用多个汇总配置将项目拆分为不同的苗条应用程序(只需导出一系列配置而不是单个配置(。这些应用是完全独立的，不共享状态。但在我看来，这就像将传统的(快速(路由(每个路由都有自己的 html(与苗条混合在一起。如果您想使用动态行为增强现有(静态(页面，我认为这更有趣。