如何提高 next.js 应用的性能 | Jim Zhang's blog
如何提高 next.js 应用的性能2022-09-02

为什么我会来专门探讨 next.js 应用的性能问题?可能读者在进行 next.js 应用开发,npm run dev 时都见过如下的信息:

Warning: data for page "/xxx" is xxx kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data

在进行 npm run build 时也会有这样的信息:

...
├ ● /[slug] (xxxx ms)                                                                            294 kB          408 kB
├   └ css/xxx.css                                                                                xxx B
├   ├ /foo/bar (xxx ms)
...

这种情况表明,开发者一旦将应用部署在服务器上,网页的渲染速度会变慢,服务器的开销也会比较大。

如果读者不以为然,可以自己上手使用一些工具来检测网站的性能。检测网站性能比较简单快捷的一个办法是使用 Google Chrome 内置的 lighthouse。