首页/文章/nextjs

Nextjs首屏加载速度性能从80分优化到98分

2024-09-18

1333 字约 5 分钟

...

google控制台的网络network去看首次加载资源请求是否有重复加载的情况
google控制台的performance来录制首屏加载过程的文件时长以及阻塞情况,避免一些首次加载无须展示的组件的优化

*打包size优化,@next/bundle-analyzer可视化的检查页面和打包的资源大小,然后针对性去优化

next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
 enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer(nextConfig)
.env.development.local 下添加ANALYZE="true"
运行npm run build 会生成可视化资源大小页面

选择性能指标检测工具我用的pagespeed.web.dev/ 更好的了解真实用户的体验

以上是对性能可视化和测试的工具,方便针对性优化

首先对图片,css进行优化

提供大小合适的图片可节省移动数据网络流量并缩短加载用时
图片压缩squoosh.app/ 转化为webp格式减小体积

可以使用nextui提供的Image,它提供对图片进行不同屏幕的适配尺寸,以及懒加载功能

<Image src={props.mainImage} sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 540px" width={540} height={512} alt={`Feature - ${props.title}`} quality={IMAGE_QUALITY} />

css使用的tailwind.css库内部对css做了处理优化, 进行不使用style些内嵌样式,提高编译速度( 首屏不需要的组件可使用lazy-load包来做懒加载处理加快渲染速度 )
减少重排和重绘,避免布局偏移例如:动态设置css导致的布局偏移,可以使用占位符来解决或者固定

组件进行懒加载

按需加载nextjs提供了dynamic它包含了React.lazy和susponse,是需要时再去加载而不是可视区内在加载，适合对子组件进行使用
- ```
import dynamic from "next/dynamic";
const FedeInSection = dynamic(() => import('@/components/FedeInSection'));
```

优化例:

通过 @next/bundle-analyzer 观察当前首屏page加载的资源

通过左侧可以发现当前页面资源总大小为9.55MB,对它进行优化

看右侧Component组件发现我首屏一些不需要加载的组件被加载了 settubgs/asset 人声list 用户登录formModal

需要通过触发事件加载的组件被加载了,代码角度去优化它

用户点击Log In时再去加载对应展示的组件就可以避免从9.55mb优化到 6.79mb

第三方库包大小的优化

在项目中有对日期时间转换处理的场景用到了moment处理发现它的体积不是我想要的大

选用轻量级平替的包dayjs来处理做优化代码修改后将moment包删除

结果也是非常可观发现减小特别多的资源

及loash第三方库按需引入使用 import pull from "lodash/pull" 避免每次使用将整个库加载

Next.js 提供的 experimental可以帮我们对比较大的第三方库进行打包优化

在next.config.js下对体积大的

module.exports = {
  experimental: {
    optimizePackageImports: ['lodash', '@nextui-org/react', 'jszip', 'aws-sdk'],
  },
};

这个选项用来指定应优化导入的包。Next.js 会尝试优化这些包的导入，以减少最终的包大小和提升性能。

组件拆分精量化

将首屏的组件模块进行拆分复用在通过dynamic函数加载

第三方脚本工具script优化

在性能中检测时发现渲染期间加载了ffmpeg-core/ffmpeg-core.wasm 脚本

发现它的耗时较长,并且首屏不需要使用FFmpeg来处理文件等.... 优化它

在根文件加载脚本时如果当前时外部页面则不需要此wasm不加载它避免没必要的加载来优化首次加载速度

<head>
	{
		!isFrontPage && <link rel="prefetch" href="/lib/ffmpeg-core/ffmpeg-core.wasm" as="fetch" crossOrigin="anonymous" />
	}
</head>

...........中间的优化大多还是针对性对资源大小加载时机进行处理最终分数平均在93 最高一次达到98 跟网络也有一定关系欣赏结果把

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

相关文章

更多文章 →

nextjs2026-04-03

揭秘 Next.js 的图像魔法

揭秘 Next.js 的“图像魔法”：不仅仅是自动压缩你可能以为组件只是帮你把图片体积变小了，但实际上，它更像是一个实时的图像处理引擎。当你把一张高清大图扔给它时，Next.js 会在服务器端（或构建时）根据用户的设备情况，动态生成最合适的图片版本。这背后主要依赖以下几个核心机制：现代格式的自动转码这是性能提升最显著的一点。你上传的可能是兼容性最好的 JPG 或 PNG，但 Next.js 会检测访问者浏览器的能力。 We...

nextjs2024-12-31

Next.js App Router 项目，想加个进度条，但是怎么监听页面跳转

问题起因是我想给自己博客页面切换时加一个进度条。博客前端技术栈是 React，使用 Next 做了 SSR。在进度条方面，npm 上有非常成熟的库。我们只需要调用和即可开启和结束进度条。我们监听到页面开始、结束切换的时候，调用和即可。但是问题是，Next 13 版本以后推出的 App Router 模式并没有给出监听路由切换的 API。先来看看 Pages Router 模式的做法：可以发现，在 npm 上面有一个 Nex...

nextjs2024-10-09

NextJs从0-1实现一个博客系统

Nextjs 是什么是一个基于 React 的开源框架，用于构建生产级别的 React 应用程序。它为开发人员提供了一套丰富的工具和约定，使得创建高性能、可扩展的 Web 应用程序变得更加容易。相关代码 Next.js 的主要特性：服务器端渲染 (SSR)：静态站点生成 (SSG)： API 路由：文件系统路由：图像优化： TypeScript 支持：自定义服务器：插件系统：安装使用官网推荐的方式安装，执行，输入项...

nextjs2024-09-14

NextJs 14 从入门到精通

node 环境 npx、yarn、bun 工具皆可（个人偏好，因为它快）初始化 next 项目项目目录安装 autoprefixer 及配置 postcss 从 Layout 开始 app/layout.tsx 是整个应用的主布局文件，相当于React的main.ts或App.tsx，它主要做以下几个事情：项目 metadata 加载全局样式 globals.css 加载网络/本地字体定义应用顶级布局国际化 i18n 第三...

nextjs2024-09-10

使用NestJS开发小程序后台

前言前一篇写NestJS的特点，使用NestJS，开启我们的Hello World! 以及NestJS各种热更新方法，本篇会写NestJS在实际项目中的应用。（ORM、参数校验、全局错误处理等等） NestJS 中使用 TypeORM 一、安装依赖这里假设使用 MySQL 数据库，你可以根据实际情况选择其他数据库驱动。二、配置数据库连接 1. 在项目根目录下创建一个文件，内容如下：将、和替换为你的实际数据库连接信息。 2...

nextjs2024-05-14

Next.js 跨域问题的各种解法

本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！前言跨域是使用 Next.js 常遇到的问题，问题主要分为两类： 1. 如何调用一个跨域接口？ 2. 如何实现一个跨域接口？本篇我们会先从跨域的基础知识开始讲起，然后讲解 Next.js 下这两大类问题的各种解决方案，帮你系统解决跨域问题！快收藏、点赞这篇文章留做备忘吧！ PS：系统学习 Next.js，欢迎入手小册。基础篇、实战篇、源码篇...

评论

请登录后发表评论

加载评论中...

目录