Next.js 应用程序需要 33 秒才能加载。是什么让它这么慢？

Question

我几乎完成了我的第一个 Next.js 应用程序。

Dev 加载总是有点慢，但生产绝对是荒谬的。

首次加载时，主页呈现需要 30 多秒。

我见过非常慢的网站需要 5-10 秒，但是我可能做错了什么会导致 30 秒的加载时间？

预取是一个巨大的性能杀手吗？

Answer 1

寻找瓶颈：

首先，您需要找出使您的网站变慢的原因。为此，我推荐灯塔或开发工具的网络选项卡。

常见的开发者错误：

A.开发代替生产模式：

Next.js 有两种模式。开发模式 ( next dev) 非常慢，因为执行和交付了很多开发工具。

要在生产模式下运行您的应用程序，首先next build使用next start.

B. 包含太多代码：

有时，开发人员会将巨大的 npm 模块甚至是仅为 node.js 构建的模块包含到 next.js 中。

由于这些示例，查找这些模块实际上非常容易：

• https://github.com/zeit/next.js/tree/canary/examples/with-webpack-bundle-analyzer
• https://github.com/zeit/next.js/tree/canary/examples/with-webpack-bundle-size-analyzer

C.冷无服务器实例：

如果您在无服务器提供程序上运行 next.js 实例，请记住，启动无服务器实例可能需要一些时间。特别是如果您有免费计划。