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

文章预览

点击上方  程序员成长指北 ，关注公众号 回复 1 ，加入高级Node交流群 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进行优化 提供大小合适的图片可节省移动数据网络流量并缩短加载 ………………………………