在 Svelte/Sapper 项目中预加载关键请求

Question

我在使用Svelte/Sapper 构建的生产网站上运行Lighthouse 以衡量其性能。根据 Lighthouse 的说法，最大的机会似乎是预加载关键请求。

我找到了一个关于它的GitHub issue，但我不知道如何让 Svelte/Sapper 自动预加载关键资源，即 JavaScript 和 CSS 包。我不能只对它们进行硬编码，因为它们在每次构建后都有不同的哈希值。

例如，我希望将这些包含在生成的 HTML 的 head 标记中：

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="/client/chunk.3065f5a7.js" as="script">
<link rel="preload" href=/client/index.eb6a9ec4.js" as="script">

如何让 Svelte/Sapper 自动为关键资源添加 <link type="preload" /> 元标记？

Answer 1

如果不了解您的项目结构，这是一个很难回答的问题，但是，Sapper does have the ability to preload resources。您正在寻找类似的东西吗？

直接取自上面的链接：

<script context="module">
    export async function preload(page, session) {
        const { slug } = page.params;

        const res = await this.fetch(`blog/${slug}.json`);
        const article = await res.json();

        return { article };
    }
</script>
<script>
    export let article;
</script>
<h1>{article.title}</h1>

编辑：2021 年 4 月 7 日 根据Sapper GitHub Issue#1576，从 2020 年 10 月开始，这似乎从 Sapper 0.28.10 开始得到解决。