文章预览
作者：先飞的笨鸟 https://juejin.cn/post/7377208894550802441 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进行优化 提供大小合适的图片可节省移动数据网络流量并缩短加载用时
………………………………
