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

转载于 2025-05-15 15:18:52 发布 · 57 阅读

CC 4.0 BY-SA版权

原文链接：https://mp.weixin.qq.com/s?__biz=MzU3MDAyNDgwNA==&mid=2247501661&idx=1&sn=4f0b8f216b7ed4f39f9b37c5a2a92ed5&chksm=fd69a96829ac6cc3b08da23379b2032a288511ac6cb0370231d20103b5f8179d070e55bff619&scene=126&sessionid=0

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/^[1] 更好的了解真实用户的体验

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

首先对图片,css进行优化

提供大小合适的图片可节省移动数据网络流量并缩短加载用时
图片压缩squoosh.app/^[2] 转化为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 跟网络也有一定关系欣赏结果把