Next.js中npm run dev启动后首次页面加载慢的原因及优化方案

问题描述 #

使用Next.js执行npm run dev启动项目后，页面首次加载耗时远高于后续刷新操作，通过Chrome DevTools网络面板分析，首次加载速度仅为第二次的1/4。

加载截图 #

• 首次加载
  

• 第二次加载
  

原因分析 #

1. 开发服务器冷启动开销：npm run dev启动的Next.js开发服务器，首次加载时需要完成模块编译、依赖解析、React组件树初始化等全量初始化操作，这些工作仅在首次启动时执行，后续刷新直接复用已准备好的资源。
2. 浏览器无缓存状态：首次加载时浏览器本地无任何项目静态资源（JS、CSS、图片等），需从服务器完整下载所有资源；后续刷新时浏览器优先读取本地缓存，仅请求更新的内容。
3. 开发模式的调试优先策略：开发模式下为了方便调试，代码未做压缩、Tree Shaking等生产级优化，文件体积更大；同时会注入热更新、源码映射等调试相关代码，增加了首次加载的资源量。

可行的加载加速方法 #

• 启用Turbo开发模式：Next.js 13及以上版本支持next dev --turbo命令，通过增量编译和缓存机制，缓存已编译的模块和依赖，大幅缩短首次加载和服务器启动时间。
• 清理冗余依赖：移除项目中未使用的npm包，减少编译时需要处理的模块数量，降低初始化开销。
• 优化组件初始化逻辑：避免在顶层组件中执行大量同步计算或同步数据请求，将此类逻辑延迟到组件挂载后执行，或使用Suspense实现异步加载，减少首次渲染的阻塞时间。
• 合理配置缓存规则：在next.config.js中通过headers配置，为静态资源设置合适的缓存策略，帮助浏览器更高效地缓存资源（开发模式下Next.js已有默认配置，可根据需求微调）。
• 利用Fast Refresh特性：虽然无法优化首次加载，但Fast Refresh能让后续代码修改后的刷新速度更快，提升整体开发体验。

内容的提问来源于stack exchange，提问作者vnikonov_63