Nuxt3之使用lighthouse性能测试及性能优化实操
lighthouse性能测试工具
什么是 LightHouse 呢
Lighthouse 是一个开源的自动化工具，用于提高网页的质量。可以通过浏览器的开发者工具运行，也可以作为命令行工具或 Node.js 模块集成到持续集成系统中。Lighthouse 可以帮助开发者：
- 性能优化：评估网页加载速度和响应时间，提供改进建议。
- 可访问性：检查网页是否符合无障碍标准，确保所有用户都能轻松访问。
- 最佳实践：检测网页是否存在常见的开发错误，如未压缩的资源、不安全的内容等。
- SEO 优化：分析网页的搜索引擎优化情况，提供提升排名的建议。
- PWA 兼容性：评估网页是否符合渐进式 Web 应用（PWA）的标准。
如何使用 LightHouse 呢
使用 Lighthouse 非常简单，只需在 浏览器开发者工具中选择 Lighthouse 面板，设置需要的审计选项，然后点击“Generate report”即可生成详细的报告。报告中不仅包含评分，还提供了具体的优化建议和改进方法。
快捷入口：本文以Edge浏览器窗口为例，（Chrome同理） 点击键盘 F12 根据下图操作即可
性能优化归纳
-
静态资源优化：
Nuxt3 静态资源目录有：Public ， Assets
① 共性：均是存放 css，js，img 等静态资源文件
② 编译区别：
public 在打包过程中，文件不会被编译或处理，直接原样复制到输出目录。
sssets 目录则是存放需要经过构建、编译处理的静态资源。
③ 引用区别：
public 资源在页面中引用：/img/avatar.png
assets 资源在页面中引用：~/assets/img/avatar.png
建议：将css，img，svg，txt，json，js 文件放在 assets 目录下，打包时经过 vite 构建生成哈希值的文件名可提高缓存效率，同时配置压缩工具，进一步压缩包体积，也可提高性能。
依据参考 Vite 文档关于静态资源存放说明 -
nuxt.config.ts 配置 资源包分析工具
// nuxt.config.ts -> build 属性
build: {
analyze: {
// 是否启用分析工具，默认为 false
enabled: true,
// 分析报告的输出目录，默认为 '.nuxt/analyze'
reportFilename: '.nuxt/analyze/report.html',
// 是否在浏览器中自动打开分析报告，默认为 false
open: true,
// 分析器类型，可选值有 'webpack-bundle-analyzer' 和 'source-map-explorer'
analyzerMode: 'server',
// 分析服务器的端口号
port: 8888,
// 其他 webpack-bundle-analyzer 配置项
generateStatsFile: false,
statsFilename: '.nuxt/analyze/stats.json',
statsOptions: null,
logLevel: 'info',
},
},
代码可以直接使用。无需安装插件。开启资源分析配置，可以让你清晰明了的知道构建后的依赖文件大小，能够为分包优化提供指引
- nuxt.config.ts 中配置 vite 分包优化
// nuxt.config.ts -> vite 属性
vite: {
build: {
rollupOptions: {
output: {
// 针对 id 进行分包，减轻 node_modules 构建后的大小，提高运行速度
// 具体 对哪些依赖包分包，可以按照依赖分析工具具体分包，也可以根据你package.json依赖进行分包
manualChunks: (id) => {
if (id.includes('vue-i18n')) {
return 'i18n';
} else if (id.includes('vant')) {
return 'vantUI';
} else if (id.includes('css')) {
return 'styleCss';
}else if (id.includes('pinyin')) {
return 'pinyinPlugins';
} else if (id.includes('pinia')) {
return 'piniaPlugins';
}
},
},
},
},
},
代码分包类型需要根据项目实际进行分包，每个人安装及使用的依赖不同。
具体配置详情可查阅 Rollup 关于分包文档
- nuxt.config.ts 中开启构建压缩，这个不需要安装插件
// nuxt.config.ts -> nitro 属性
nitro: {
// 开启gzip压缩
compressPublicAssets: true,
},
传统需要安装 gzip 压缩工具 ，nitro 是Nuxt 的底层核心，为Nuxt 提供性能、框架，路由服务。
如果启用，Nitro 将生成支持的公共资产类型和预渲染路由的预压缩（gzip 和/或 brotli）版本 大于 1024 字节的 public 目录。使用最佳压缩级别。默认使用gzip压缩
Nitro compressPublicAssets 配置链接
-
Nitro 与 Nuxt 3 的关系
- 底层框架：Nitro 是 Nuxt 3 的底层服务器框架，负责处理服务器端的逻辑。
它独立于 Nuxt 3，可以单独使用，但通常与 Nuxt 3 一起使用以提供完整的 SSR 和 SSG 功能。 - 性能优化：Nitro 通过优化服务器端的处理流程，提高了 Nuxt 3 应用的性能。
它支持多种部署环境，包括传统的服务器、无服务器函数（如 AWS Lambda、Vercel Functions 等）和静态托管服务。 - API 路由：Nitro 提供了强大的 API 路由功能，允许开发者在 Nuxt 3 应用中轻松创建和管理 API 端点。
这些 API 路由可以与 Nuxt 3 的页面和组件无缝集成，提供统一的开发体验。
-
页面代码主体分割
若SSR页面初始化阶段执行的每个函数代码超过50行，除 API接口 部分，涉及赋值，复杂运算，动画效果，pinia插件缓存的代码，要提取出来另外包装，否则JS运算阶段会造成阻塞，不利于浏览器渲染速度。
不要套娃！！！不要套娃！！！不要套娃！！！
JS 是顺序渐进单线程语言，函数套娃在服务端渲染阶段会严重阻塞进程！导致服务端渲染不全面或水合不匹配。 -
网络图片优化
- Nuxt 虽然提供了 Nuxt/Image 组件， 但是使用此组件构建后会平白增加近乎50M的体量，我认为不值得。原生Img 的属性配置足矣。
- 特大超大图片，可使用 图像切片 方法，具体可查阅网络做法。
- 百K图片，可将图片格式下载为 .svg 或 .webp 格式，存为网络图片，在本地使用 <img loading=“eager”（全速加载-与js加载同步执行，会阻塞进程） 或 loading=“lazy”（懒加载-服务端渲染结束执行，提高首屏渲染速度）
- 小图片，直接存放在assets目录下
- 注意：每个图片<img 都需要给图片指定宽高属性，alt属性，利于SEO以及性能加分
-
善用 Try…Catch…
在服务端渲染阶段，对API接口函数使用 try…catch… 进行兜底，防止函数error导致整个页面出不来，这样的体验对用户来说是毁灭性打击。 -
封装一个良好的 request 函数
Nuxt3 提供了 fetch 的语法糖函数，useFetch、useAsyncData，在性能上，fetch 是远胜于 axios 的。不必再安装个 axios 增加体积又不能在性能上有提升。
也无需在业务中嵌套各种 Promise ，使用 async … await 更快更简单，同是异步操作，不要重复套娃。
在服务端渲染阶段，使用 try…catch 对 API 进行 await 操作，可保证服务端完整渲染且不阻塞。 -
使用浏览器缓存策略
浏览器缓存可 减少资源反复网络请求消耗，静态资源反复加载的优化效果显著，提高应用页面的访问速度，是前端性能
优化必不可少的一环。
做法很简单，对 Http 请求的请求头 header 添加 cache-control 属性
headers: {
'Content-Type': 'application/json',
'cache-control': 's-maxage=7200', // 缓存2小时
},
关于浏览器缓存明细讲解，参考文章 浏览器缓存机制介绍与缓存策略剖析
- 删除代码中多余CSS，JS，无用代码，减轻体量，提高速度。
原文地址：https://blog.csdn.net/qq_43869364/article/details/143620490
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！