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

正文

请到「今天看啥」查看全文

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

首先对图片,css进行优化

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

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

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

请到「今天看啥」查看全文