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

优化 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 = () => {
  return <button classname="{styles.btn}">click me</button>;
};

2. 依赖的延迟加载

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

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

如何实施：

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

import dynamic from 'next/dynamic';

const heavycomponent = dynamic(() => 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="" 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;
  );
}

优化策略：

• 对非必要脚本使用strategy="lazyonload"。
• 对用户交互之前所需的关键脚本使用strategy="beforeinteractive"。

8. 删除未使用的包

随着时间的推移，随着项目的发展，您可能会积累未使用的依赖项，从而使您的包变得臃肿。

使用 depcheck 等工具定期检查并删除未使用的软件包。

如何实施：

在项目中运行 depcheck 以查找并删除未使用的依赖项。

npx depcheck

9. 检查当前捆绑包大小

密切关注包大小以防止性能下降非常重要。

@next/bundle-analyzer 工具可帮助您可视化包中每个模块的大小，从而更轻松地识别和优化大型依赖项。

10.使用服务器组件

next.js 13 引入了服务器组件，它允许您在服务器上渲染页面的部分内容，并仅向客户端发送最少的 javascript。

这可以大大减少客户端 javascript 的数量，从而提高性能。

结论

优化 next.js 应用的性能是一个持续的过程，但通过遵循这些最佳实践，您可以显着减少加载时间并改善用户体验。

实施这些策略以确保您的应用从一开始就快速、响应灵敏且高效！

快乐编码！