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 跟网络也有一定关系 欣赏结果把
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
