Menu

How to optimize your Next.js application for production

在将Next.js应用投入生产之前,有一些优化和模式你应该考虑实施,以获得最佳的用户体验、性能和安全性。

本页面提供了可作为参考的最佳实践,用于构建应用程序时投入生产前,以及你应该了解的Next.js自动优化

自动优化

这些Next.js优化默认启用,无需配置:

  • 代码分割 Next.js自动按页面对应用程序代码进行代码分割。这意味着导航时只加载当前页面所需的代码。在适当的情况下,你还可以考虑懒加载第三方库。
  • 预取 当指向新路由的链接进入用户视口时,Next.js会在后台预取该路由。这使得导航到新路由几乎是即时的。你可以在适当的情况下选择退出预取。
  • 自动静态优化 如果页面没有阻塞性数据要求,Next.js会自动确定该页面是静态的(可以预渲染)。优化后的页面可以被缓存,并从多个CDN位置提供给终端用户。你可以在适当的情况下选择使用服务器端渲染

这些默认设置旨在提高应用程序的性能,并减少每次网络请求的成本和传输的数据量。

开发过程中

在构建应用程序时,我们建议使用以下功能以确保最佳性能和用户体验:

路由和渲染

数据获取和缓存

  • API路由 使用路由处理程序访问后端资源,并防止敏感机密暴露给客户端。
  • 数据缓存 验证你的数据请求是否被缓存,并在适当的情况下选择缓存。确保不使用getStaticProps的请求在适当的情况下被缓存。
  • 增量静态再生 使用增量静态再生在构建后更新静态页面,而无需重新构建整个站点。
  • 静态图像 使用public目录自动缓存应用程序的静态资源,例如图像。

UI和可访问性

  • 字体模块 通过使用字体模块优化字体,该模块自动将字体文件与其他静态资源一起托管,减少外部网络请求,并减少布局偏移
  • <Image> 组件 通过使用Image组件优化图像,该组件自动优化图像,防止布局偏移,并以WebP等现代格式服务图像。
  • <Script> 组件 通过使用Script组件优化第三方脚本,该组件自动延迟脚本并防止它们阻塞主线程。
  • ESLint 使用内置的eslint-plugin-jsx-a11y插件尽早捕获可访问性问题。

安全性

  • 环境变量 确保你的.env.*文件添加到.gitignore中,并且只有公共变量以NEXT_PUBLIC_为前缀。
  • 内容安全策略 考虑添加内容安全策略,以保护你的应用程序免受跨站脚本、点击劫持和其他代码注入攻击等各种安全威胁。

元数据和SEO

  • <Head> 组件 使用next/head组件添加页面标题、描述等。

类型安全

  • TypeScript和TS插件 使用TypeScript和TypeScript插件获得更好的类型安全性,并帮助你尽早发现错误。

投入生产前

在投入生产之前,你可以运行next build在本地构建应用程序并捕获任何构建错误,然后运行next start来测量应用程序在类生产环境中的性能。

核心Web指标

  • Lighthouse 在隐身模式下运行lighthouse,以更好地了解用户将如何体验你的网站,并确定需要改进的领域。这是一个模拟测试,应与查看现场数据(如核心Web指标)配合使用。

分析包

使用@next/bundle-analyzer插件分析JavaScript包的大小,并确定可能影响应用程序性能的大型模块和依赖项。

此外,以下工具可以帮助你了解向应用程序添加新依赖项的影响: