Next.js应用程序加载需要33秒。是什么让它变慢呢?

next.js React.js

小卤蛋

2020-03-24

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

开发人员总是加载缓慢,但是生产绝对是荒谬的。

首次加载时,主页渲染需要30秒钟以上的时间。

我已经看到非常缓慢的网站需要5到10秒的时间,但是我可能做错了什么而导致30秒的加载时间?

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

第3479篇《Next.js应用程序加载需要33秒。是什么让它变慢呢?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
凯西里 2020.03.24

找到瓶颈:

首先,您需要找出导致网站运行缓慢的原因。为此,我建议使用灯塔或开发工具的“网络”标签。

开发人员常见错误:

A.开发代替生产模式:

Next.js有两种模式。开发模式(next dev)相当慢,因为已执行和交付了许多开发工具。

要在生产模式下运行您的应用,请首先使用构建您的应用next build,然后再使用进行启动next start

B.包含太多代码:

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

由于这些示例,实际上找到这些模块非常容易:

C. Cold Serverless instance:

If you are running your next.js instance on a serverless provider keep in mind that it may take some time to start the serverless instance. Especially if you have a free plan.

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android