优化Next.js来提高性能

优化Next.js来提高性能

在本文中,我们将学习改进NextJS捆绑包性能的各种方法,从而提高NextJS应用在Google PageSpeed Insights或Lighthouse中的性能。

根据文档,NextJS是一个React框架,提供了创建Web应用程序所需的构建块。

构建块 是创建Web应用程序所需的各种必要功能,如路由、用户界面、数据获取、渲染等。

在NextJS中,当我们运行npm run build命令时,NextJS会为生产环境生成一个优化版本的应用程序。输出文件生成在 ‘.next’ 文件夹中。该文件夹中的所有捆绑包都经过编译、缩小并准备好在浏览器上提供,以实现跨所有浏览器的最佳性能。

有时,由于不遵循最佳实践,我们的性能受到了影响。以下是实现应用程序更好性能的方法:

1. 动态导入:

Next.JS支持通过动态导入进行延迟加载。在应用程序初始加载期间不可见的组件不应该正常加载。它们应该使用动态导入进行加载,这样可以实现延迟加载,当需要该组件时才将其发送给浏览器。

import dynamic from 'next/dynamic';

//Normal Import
import Starworld from './components/Starworld';

//Dynamic Import
const Startworld= dynamic(()=>import('./components/Starworld'))
JavaScript

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内容,以便尽早加载。
<head>
   <title>Page Title</title>
   <link rel="preload" 
            fetchpriority="high" 
            as="image" 
            href="/path/to/Firstimage.webp" 
            type="image/webp">
</head>
JavaScript
  • 将样式表分成不同的风格,并仅加载必要的关键样式来减少初始加载时间。
  • 使用CDN(内容分发网络)将服务器地理位置靠近用户,以减少资源加载时间。
  • 如果最大内容绘制(LCP)是字体,尝试通过减小字体大小来提高应用性能。

4. 为Web页面惰性加载图像:

应该惰性加载在应用程序的后面部分使用的图像。

  • 对于Next.js,使用内置的 Image组件(next/image) 来优化图像,从而提高性能。
  • 浏览器级别的惰性加载还提供了一种延迟加载屏外图像的方法。可以在标签中使用 ‘loading’属性 来延迟加载屏外图像。
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
JavaScript

5. 使用Intersection Observer API:

我们可以使用Intersection Observer API来加载首页上的屏幕外组件。这会大大提高应用程序的性能。通过Intersection Observer,您可以观察组件,如果它在视口中,则可以异步加载它,否则在不需要加载组件时我们就不需要加载。

import { useState, useRef } from "react";
export default function Home(){
    const [toggler, setToggler]= useState(false);
    const [viewPortValue, setViewPortValue]= useState("");
    const ref=useRef();
    const InterSectionObserverComponent= (ref)=>{
        let isViewPort= false;
        const observer= new IntersectionObserver(([entry])=>{
            isViewPort= entry.isIntersecting;
            setViewPortValue(isViewPort);
        });
        if(ref.current){
            observer.observe(ref.current);
        }
    }

}
JavaScript

上面的函数用于观察组件。

{
    <div ref={ref}>
        {viewPortValue && <Startworld />}
    </div>
}
JavaScript

上述代码将在ViewPortValue变为true时加载Starworld组件,即组件在视口内可见时。

6. 特定导入:

当我们只想导入库中的特定函数时,而不是整个库,我们可以进行特定函数的导入。从而减小捆包大小,影响应用程序的性能。

//old way
import _remove from 'lodash';
//new way
import _remove from 'lodash/remove';
JavaScript

7. 在next/link组件中将Prefetch属性设置为false:

当我们在Next.JS应用程序中使用’next/link’组件时,默认情况下,它会预取链接视口中的页面。例如,在主页的头部有一个链接’/career’和’/testimonial’页面。即使用户在主页上,它也会在构建时预取这些career和testimonial组件。

保持 Prefetch={false} 以避免预取页面,从而减少包的大小。通过添加此属性,它将在悬停链接时预取组件,而不是在加载时预取页面。

<Link href="/career" prefetch={false}>
    <a>Career</a>
</Link>
JavaScript

8. 使用Bundle Analyzer来分析构建:

安装@next/bundle-analyzer库来分析应用程序的构建。通过Bundle分析器,我们将了解应用程序中使用的库的大小。

通过分析器,我们可以进行以下活动:

  1. 我们可以用较小的替代品替换较大的库。
  2. 我们可以删除在应用程序中使用的不必要的库。
  3. 我们可以将较大的库任务移到服务器端,并通过API访问功能。

通过实施上述方法,我们可以优化我们的NextJS应用程序,从而提高Next.JS应用程序的性能。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册