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

Question

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

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

看来我可以通过为每个子页面创建一个文件夹来手动创建我的路由，这样就可以生成单独的 js 文件。也许问题是我将单个 _select.svelte 文件中的所有组件导入到每个子页面的 select 正确的 svelte 组件。我试图动态导入组件，希望这会为每个子页面生成一个不同的 js 文件，但是静态站点生成将不起作用。我可能在这里做错了什么......

感谢任何提示！

Answer 1

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

如果您想优化应用的加载时间，您可能正在寻找代码拆分（动态导入）。这是一个很好的答案：

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

Answer 2

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

.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}

Demo here.

请注意，您必须列出所有不同的 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}

...因为打包器需要能够 'see' 在构建应用程序时动态导入哪些文件。

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

How to generate separate js files when using [slug].svelte

svelte

sapper