优化 Nextjs 应用性能的经过验证的技巧 ⚡️

php中文网 2024-10-15 11:51:39

优化 web 应用程序的性能对于提供快速、流畅的用户体验至关重要。

使用 next.js 这个强大的 react 框架，您可以利用许多内置功能来提高应用程序的速度和效率。

以下十个关键策略可帮助您的 next.js 应用获得最佳性能：

1. 仅加载您需要的 javascript 和 css

为了避免不必要的文件使您的应用程序变得臃肿，请确保您仅加载所需的 javascript 和 css。

next.js 默认情况下会自动对 javascript 进行代码分割，这意味着每个页面仅加载其功能所需的 js。

同样，避免全局导入大型 css 文件 - 使用模块化或范围内的 css 来减少每个页面上加载的未使用 css 的数量。

如何实施：

根据需要动态导入组件。
将 css 模块导入范围保持在特定组件范围内。

import styles from './button.module.css'; // css module

const button = () =&gt; {
  return <button classname="{styles.btn}">click me</button>;
};

2. 依赖的延迟加载

延迟加载是一种缩短加载时间的强大技术。它确保仅在需要时加载大型或不太关键的组件。

这会减少初始包的大小，从而加快页面首次有意义的渲染速度。

如何实施：

next.js 支持动态导入以延迟加载非必需组件。

import dynamic from 'next/dynamic';

const heavycomponent = dynamic(() =&gt; import('./heavycomponent'), {
  ssr: false,
});

export default function home() {
  return <heavycomponent></heavycomponent>;
}

3. 使用 next.js 中的组件

next.js 提供了内置的组件，可以针对不同的屏幕尺寸和格式自动优化图像。

此组件可确保图像延迟加载，并在可用时以 webp 等现代格式提供，从而显着提高性能。

如何实施：

import image from 'next/image';

export default function home() {
  return (
    <image src="/path-to-image.jpg" alt="an optimized image" width="{500}" height="{300}"></image>
  );
}

4. 更喜欢 css 而不是 javascript

尽可能使用 css 来实现动画和过渡，而不是 javascript。

css 动画通常性能更高，因为它们可以利用硬件加速，而基于 javascript 的动画可能会导致卡顿和性能瓶颈。

例子：

不要使用 javascript 来实现简单的淡入效果，而是使用 css 过渡。

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.fade-in-visible {
  opacity: 1;
}

5.避免一开始就显示加载程序

加载旋转器或骨架屏幕可以给用户一种进步感，但它们也可能表明您的应用程序很慢。

不要一开始就显示加载程序，而是专注于优化您的应用以快速、渐进地加载内容。

如何实施：

使用服务器端渲染 (ssr) 或静态站点生成 (ssg) 预先加载内容。
主要内容呈现后，延迟加载页面中不太重要的部分。

6.使用next.js字体优化

如果处理不当，字体会减慢加载时间。 next.js 具有内置的字体优化功能，可以自动为您的应用选择最佳的字体加载策略，以提高性能。

如何实施：

使用内置的 google fonts 集成以最佳性能加载字体。

import { inter } from 'next/font/google';

const inter = inter({ subsets: ['latin'] });

export default function home() {
  return <div classname="{inter.classname}">hello, world!</div>;
}

7. 脚本优化

仅在必要时加载外部脚本。如果脚本对于特定页面而不是整个应用程序至关重要，请避免全局加载它。

next.js 允许您使用 <script></script> 组件控制脚本加载的方式和时间。

如何实施：

import script from 'next/script';

export default function home() {
  return (
    
      <script src="https://example.com/some-script.js" strategy="lazyonload"></script>&gt;
  );
}

优化策略：