DEV Community
·
为什么Next.js在开发中如此缓慢？
💡
原文英文，约1100词，阅读约需4分钟。
📝
内容提要
作者在使用Next.js开发应用时发现其速度较慢，尽管Next.js具备内置路由和SEO支持等优点。与Vite + React相比，Next.js的重建和刷新速度明显较慢，主要由于同时编译前后端和使用Webpack等原因。为改善体验，建议使用Turbopack、拆分组件、懒加载和后端分离。总体而言，Vite在开发速度上更具优势。
🎯
关键要点
- 作者在使用Next.js开发应用时发现速度较慢，尽管其具备内置路由和SEO支持等优点。
- 与Vite + React相比，Next.js的重建和刷新速度明显较慢，主要由于同时编译前后端和使用Webpack等原因。
- Next.js每次保存文件时都会进行多次重建，导致浏览器刷新缓慢，尤其在大型复杂应用中更为明显。
- Next.js同时编译前后端，导致每次保存都需要判断影响范围，效率低下。
- Next.js使用React Fast Refresh，但在大型应用中表现不佳，常常触发完整页面重载。
- Next.js默认使用Webpack，重建速度慢，而Vite使用esbuild和rollup，速度更快。
- Next.js监视大量文件，导致CPU负担加重，影响开发速度。
- 开发者的机器性能也会影响Next.js的开发体验，尤其是在本地同时运行前后端代码时。
- 为改善Next.js的开发速度，建议使用Turbopack、拆分组件、懒加载和后端分离。
- 在构建全栈应用时，Next.js仍然是一个不错的选择，但在开发速度上，Vite更具优势。
❓
延伸问答
为什么Next.js在开发中速度较慢？
Next.js在开发中速度较慢主要是因为它同时编译前后端，并使用Webpack进行重建，这导致每次保存文件时需要进行多次重建，影响效率。
Next.js与Vite + React相比有什么不同？
与Vite + React相比，Next.js的重建和刷新速度明显较慢，主要因为Next.js使用Webpack，而Vite使用esbuild和rollup，后者速度更快。
如何改善Next.js的开发速度？
可以通过使用Turbopack、拆分组件、懒加载和将后端分离来改善Next.js的开发速度。
Next.js的Hot Reload有什么问题？
Next.js的Hot Reload在大型应用中表现不佳，常常触发完整页面重载，导致开发体验不理想。
开发者的机器性能如何影响Next.js的使用？
开发者的机器性能会影响Next.js的开发体验，尤其是在本地同时运行前后端代码时，低性能机器会导致开发速度变慢。
在什么情况下使用Next.js更合适？
使用Next.js更合适的情况包括构建全栈应用、需要SEO优化或静态生成时。
➡️
