在进行 SvelteKit 服务器端渲染页面时分析、优化和延迟加载vendor.js

Question

我正在使用 SvelteKit 构建一个网站。SvelteKit 让事情变得很有趣，尤其是服务器端渲染很容易。目前，由于数据库生成的网页数量很大，我正在使用 SvelteKit 的node.js 适配器为该网站提供服务。

然而，尽管有服务器端渲染，但根据PageSpeed Insights ，我仍然面临着移动连接性能低下的问题。

First Contentful Paint 很慢（4.0 秒），我自己觉得很难接受。

我分析这个问题主要与阻止vendor.js.

Node.js 适配器加载vendor.js，如下所示：

<link rel="modulepreload" href="/_app/chunks/vendor-87f5cdbf.js">

还包括一些其他modulepreload捆绑包，但它们不会导致显着的加载时间

vendor.js是 350kb，是网站负载阻塞最多的原因。

我的问题是

• 我如何分析vendor.js中的内容
• 如何减少 SvelteKoit 中的vendor.js 大小
• 我怎样才能使一些JavaScript代码延迟加载，至于服务器端渲染，我相信大部分代码可以在第一个内容完整绘制之后运行

我的前端是开源的，可以获取更多信息。我正在使用 svelte-bootstrap 库。

Answer 1

modulepreload您可能希望禁用供应商块，而不是进行这种复杂的脚本重写：

export default {
    kit: {
        vite: {
            build: {
                rollupOptions: {
                    output: {
                        manualChunks: undefined
                    }
                }
            }
        }
    }
}

更多信息请参见 Vite 问题跟踪器：https://github.com/vitejs/vite/issues/3731