如何在 Next.js 中测量前端性能指标
随着 Web 应用程序的复杂性不断增加，开发者们越来越需要了解他们构建的应用的性能指标。通过对关键指标的测量，可以帮助 Web 开发者识别和解决性能瓶颈，改进用户体验。而 Next.js，是一个非常受欢迎的 SSR（Server-Side Rendering）框架，给开发者们提供了一些方便的工具，用于帮助他们测量前端性能指标。
本文将介绍如何在 Next.js 中测量 Web 应用程序的关键性能指标，包括 TTFB、FID、LCP、CLS 以及总体性能。我们还将介绍一些工具和示例代码，以帮助您自己检查和优化性能。
测量 TTFB（Time To First Byte）
TTFB 是指从用户发出请求到接收到第一个字节所需的时间。通过降低 TTFB，可以提高用户感知的页面加载速度。在 Next.js 中测量 TTFB 相对较简单，因为 Next.js 为每个页面请求提供了一个生命周期方法 getInitialProps。这个方法是在服务器上运行的，并且返回一个包含组件数据的 promise。如果您想测量 TTFB，您可以使用该方法。
示例代码：
// javascriptcn.com 代码示例
import React from 'react'
import fetch from 'isomorphic-unfetch'
class Page extends React.Component {
static async getInitialProps () {
const start = Date.now()
const response = await fetch('https://api.example.com/data') // Replace with your own
const data = await response.json()
const end = Date.now()
const duration = end - start
console.log(`Duration: ${duration}ms`)
return { data }
}
render () {
return (
<div>
{this.props.data}
</div>
)
}
}
export default Page在上面的示例中，我们通过使用 fetch 方法从 API 中获取数据，并使用 console.log 记录了请求时间。您可以使用任何方式来记录请求时间，或者将其发送到报告系统中以后续分析。
测量 FID（First Input Delay）
FID 是指从用户首次与页面交互（例如，单击按钮、滚动页面）到浏览器能够处理事件之间的时间。通过优化 FID，可以提供良好的用户体验。由于 FID 取决于用户行为，因此在测量 FID 时比较困难。但是，您可以使用一些工具来模拟用户行为，例如 cypress 或 Google 的 Web 微调器（Web Vitals）扩展。
示例代码：
// javascriptcn.com 代码示例
import React, { useEffect } from 'react'
import { init } from '@web-vitals/core'
import fetch from 'isomorphic-unfetch'
function Page ({ data }) {
useEffect(() => {
init(({ id, name, value }) => {
console.log(name, value)
// Send data to reporting system or customize based on your needs
}, { data })
})
return (
<div>
{data}
</div>
)
}
Page.getInitialProps = async () => {
const response = await fetch('https://api.example.com/data')
const data = await response.json()
return { data }
}
export default Page在上面的示例中，我们使用 @web-vitals/core 库并调用 init 函数，该函数接受一个回调函数以收集性能指标。我们还将数据传递给 init 函数以了解与性能指标相关的其他数据。
测量 LCP（Largest Contentful Paint）
LCP 是指页面加载后最大的可见内容渲染的时间。通过降低 LCP，可以缩短首次渲染时间，提高页面加载速度。LCP 可能是页面上的任何元素，例如图像、视频、文本等。
下面是一段使用 Web Vitals 库检测 LCP 的示例代码：
// javascriptcn.com 代码示例
import { useEffect } from 'react'
import { getCLS, getFID, getLCP } from 'web-vitals'
function Page ({ data }) {
useEffect(() => {
getCLS(console.log)
getFID(console.log)
getLCP(console.log)
})
return (
<div>
{data}
</div>
)
}
Page.getInitialProps = async () => {
const response = await fetch('https://api.example.com/data')
const data = await response.json()
return { data }
}
export default Page如上所示，我们使用 getCLS、getFID 和 getLCP 函数分别测量 CLS、FID 和 LCP。我们在函数中传递回调函数，该函数将被执行以收集性能指标。同样，数据可以是 UserAgent 或其他与性能测量相关的数据。
测量 CLS（Cumulative Layout Shift）
CLS 是指页面在其生命周期内发生的所有不良布局位移的总和。通过降低 CLS，可以提升页面的视觉稳定性。您可以使用 CLS 检测工具来找出您的页面的 CLS 指标，并进行相应的调整。
总体性能测量
如果您要测量所有指标的总体性能，可以使用 Lighthouse，它是 Google 的开源工具。Lighthouse 可以在 Chrome 浏览器中运行，并提供了一个可视化的性能报告。要使用 Lighthouse，在 Chrome 开发人员工具中选择 Audits，然后运行测试即可。
总结
在篇文章中，我们讨论了如何在 Next.js 中测量关键的性能指标。通过监视 TTFB、FID、LCP、CLS 以及总体性能，您可以改善 Web 应用程序的性能，并提高用户体验。我们还介绍了一些测量工具和示例代码，以帮助您了解如何检查和优化性能。使用这些工具和最佳实践，您可以将 Web 应用程序的性能带到一个新的水平。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f68427d4982a6eb087f58