HUA

  • google控制台的网络network去看首次加载资源请求是否有重复加载的情况

  • google控制台的performance来录制首屏加载过程的文件时长以及阻塞情况,避免一些首次加载无须展示的组件的优化

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

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

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

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

首先对图片,css进行优化

  • 提供大小合适的图片可节省移动数据网络流量并缩短加载用时

  • 图片压缩squoosh.app/ 转化为webp格式减小体积

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

    •  1<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,是需要时再去加载 而不是可视区内在加载，适合对子组件进行使用

    •  1import dynamic from "next/dynamic";
 2const 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下对体积大的

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

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

组件拆分精量化

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

第三方脚本工具script优化

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

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

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

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

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

个人笔记记录 2021 ~ 2025