优化Next.js来提高性能
在本文中,我们将学习改进NextJS捆绑包性能的各种方法,从而提高NextJS应用在Google PageSpeed Insights或Lighthouse中的性能。
根据文档,NextJS是一个React框架,提供了创建Web应用程序所需的构建块。
构建块 是创建Web应用程序所需的各种必要功能,如路由、用户界面、数据获取、渲染等。
在NextJS中,当我们运行npm run build
命令时,NextJS会为生产环境生成一个优化版本的应用程序。输出文件生成在 ‘.next’ 文件夹中。该文件夹中的所有捆绑包都经过编译、缩小并准备好在浏览器上提供,以实现跨所有浏览器的最佳性能。
有时,由于不遵循最佳实践,我们的性能受到了影响。以下是实现应用程序更好性能的方法:
1. 动态导入:
Next.JS支持通过动态导入进行延迟加载。在应用程序初始加载期间不可见的组件不应该正常加载。它们应该使用动态导入进行加载,这样可以实现延迟加载,当需要该组件时才将其发送给浏览器。
2. 选择合适的图像格式:
使用正确的图像格式可以有助于减少Next.JS应用程序的包大小。如果您可以尝试在初始加载期间消除图像,这将是最佳的优化策略,但有时,与千言万语相比,正确位置的图像传达了更多的信息。
图像有两种类型:
- 基于矢量的图像(SVGs) 使用线条、点和多边形来表示图像。
- 基于光栅的图像(JPEG、PNG、Webp) 通过对每个像素的个别值进行编码来表示图像,在矩形网格中。
图像是 LCP(大型内容绘制时间) 的一部分,这意味着图像的大小影响应用程序的加载时间。 基于矢量的图像 非常适合于几何形状(如标志、图标等),因为它们对于更高分辨率的屏幕提供清晰的结果。 光栅图像 通常在存在复杂的颜色混合或数字照片的情况下被优先选择。
在基于光栅的图像中,与JPEG或PNG相比,更喜欢Webp格式图像。 通常,webP图像比JPEG或PNG图像小(25%-75%),从而提高性能并减少包大小。
- Youtube通过使用Webp图像提高了10%的首次加载性能。
- Facebook在切换到Webp格式时观察到了JPEG和PNG文件大小的减小。
3. 优化大型内容绘制时间:
大型内容绘制时间(LCP)是三个核心网络要素指标之一。它衡量页面显示屏幕上最大内容所需的时间。LCP应该小于2.5秒,以获得良好的用户体验。优化LCP内容是一个复杂的任务,因为它取决于各种因素,导致LCP时间较长。以下是影响LCP并可以通过以下方式进行优化的各种因素:
- 不要延迟加载LCP图像,因为它会影响初始加载的性能。
- 预加载LCP内容,以便尽早加载。
- 将样式表分成不同的风格,并仅加载必要的关键样式来减少初始加载时间。
- 使用CDN(内容分发网络)将服务器地理位置靠近用户,以减少资源加载时间。
- 如果最大内容绘制(LCP)是字体,尝试通过减小字体大小来提高应用性能。
4. 为Web页面惰性加载图像:
应该惰性加载在应用程序的后面部分使用的图像。
- 对于Next.js,使用内置的 Image组件(next/image) 来优化图像,从而提高性能。
- 浏览器级别的惰性加载还提供了一种延迟加载屏外图像的方法。可以在
标签中使用 ‘loading’属性 来延迟加载屏外图像。
5. 使用Intersection Observer API:
我们可以使用Intersection Observer API来加载首页上的屏幕外组件。这会大大提高应用程序的性能。通过Intersection Observer,您可以观察组件,如果它在视口中,则可以异步加载它,否则在不需要加载组件时我们就不需要加载。
上面的函数用于观察组件。
上述代码将在ViewPortValue变为true时加载Starworld组件,即组件在视口内可见时。
6. 特定导入:
当我们只想导入库中的特定函数时,而不是整个库,我们可以进行特定函数的导入。从而减小捆包大小,影响应用程序的性能。
7. 在next/link组件中将Prefetch属性设置为false:
当我们在Next.JS应用程序中使用’next/link’组件时,默认情况下,它会预取链接视口中的页面。例如,在主页的头部有一个链接’/career’和’/testimonial’页面。即使用户在主页上,它也会在构建时预取这些career和testimonial组件。
保持 Prefetch={false} 以避免预取页面,从而减少包的大小。通过添加此属性,它将在悬停链接时预取组件,而不是在加载时预取页面。
8. 使用Bundle Analyzer来分析构建:
安装@next/bundle-analyzer库来分析应用程序的构建。通过Bundle分析器,我们将了解应用程序中使用的库的大小。
通过分析器,我们可以进行以下活动:
- 我们可以用较小的替代品替换较大的库。
- 我们可以删除在应用程序中使用的不必要的库。
- 我们可以将较大的库任务移到服务器端,并通过API访问功能。
通过实施上述方法,我们可以优化我们的NextJS应用程序,从而提高Next.JS应用程序的性能。