为什么我会来专门探讨 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。