Nextjs 空闲时间

Question

我有一个 Next.js 平台。刷新时，加载页面大约需要 6 秒。所以我在调试以找出延迟的位置，以了解我可以做些什么来改进它并发现大约有 5 秒的空闲时间。

基本上，根据 Chrome 和 Firefox 的性能调试工具，在加载所有内容和开始呈现第一页之间有 5 秒的空闲时间。

我正在遵循所有最佳实践来加速平台，例如记忆组件、动态加载在用户与它们交互之前不需要呈现的组件，...

这是 chrome 性能工具中显示空闲时间的饼图：

我想找出发生这种情况的位置，所以我在每个步骤（_app.js、index.js、...）添加了一些时间戳日志，并发现在第一次调用之间_app.js 和 index.js 的第一次调用，等待 5 秒。

所以我开始一个一个地删除组件（包装器，如提供程序，......）以查明是否是其中一个原因，但 none 其中 none 影响了空闲时间超过 2 毫秒，而有大约 5000 毫秒去某个地方。

我的问题是，有没有办法找出空闲时间是多少，或者为什么应用程序等待这么长时间才开始渲染，或者有人知道我可以尝试加快速度吗？

编辑：

下面是显示空闲时间的瀑布截图：中间没有请求，也没有其他请求在等待结果。一结束，5秒什么都没有，然后开始渲染。

Answer 1

终于找到原因了。我正在使用 redux-persist 的 PersistGate，显然默认超时是 5 秒。将其降低到 2 秒实际上将空闲时间更改为 2 秒而不是 5 秒。

这不是最佳解决方案，因为存在 2 秒后状态未就绪的风险，因此我目前正在研究不同的库，但至少我知道空闲时间从何而来。

以防其他人遇到此问题并且原因是 PersistGate 这对我有用：

const config = {
 key: "root",
 storage: localForage,
 timeout: 2000,
};

我在研究过程中发现的其他事情：

Nextjs Idle time