什么会导致 Sapper 执行缓慢？

问题描述

出于性能原因，我正在将我的 Next.js 站点移植到 Sapper，但我的 Sapper 性能很差。加载时间长（页面大约 15 秒，如果不是从缓存中提供的）。我的 API 非常快，所以这不是问题。
我使用 Vercel 托管。但无论是在那里，还是在我的机器上，渲染时间都是大约 15 秒。
由于我是 Sapper 的新手，我怀疑我可能做错了一些事情。 我感到不舒服的一件事是，我在名为“session”的函数中从 server.js 传递全局站点设置（菜单结构等）。然而，这不像包含用户特定数据的会话对象。这是我发现在 Sapper 中实现全球商店的唯一方法（可通过 _layout.svelte 和路由页面访问） - 如果这很脏，我希望有人能告诉我另一种方式。
另一件让我担心的事情是，我在许多不同的组件中订阅了会话 - 为了让他们能够访问全局存储。

以下是我目前的设置，总结。

我在 server.js 中获取站点全局变量，并将它们传递到会话中。这是我能找到的唯一方法，使我能够从 _layout.svelte 和我的路线 ([...slug]).svelte 访问全球商店。我还添加了 stale-while-revalidate 标头，用于 Vercel 的缓存

const server = polka()
    .use(
        compression({ threshold: 0 }),(req,res,next) => {
            res.setHeader(
                "Cache-Control","s-maxage=1,stale-while-revalidate"
            );
            next();
        },sirv("static",{ dev }),sapper.middleware({
            session: async ({ headers }) => {
                const request = await fetch(
                    `https://MY_BACKEND/globals`
                );
                const { app } = await request.json();
                return {
                    app,origin: `https://${headers.host}`
                };
            }
        })
    );

_layout.svelte

<script>
  import { stores } from "@sapper/app";
  const { session } = stores();
  let mainMenu = [];
  session.subscribe(({app}) => {
    mainMenu = app.mainMenu;    
  });
</script>

[...slug].svelte

<script context="module">
    export async function preload({ params },{ app }) {
        const page = await this.fetch(`${params.slug.join('/')}.json`).then(r=>r.json());

        ...some processing which uses the 'app' globals,and the page...

        return {...}
    }
</script>

需要访问全局存储的内部组件（可能有很多）

<script>
      import { stores } from "@sapper/app";
        let something = '';
        const { session } = stores();
        session.subscribe(({app}) => {
          something = app.something
        });
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）