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 配置资源包分析工具

javascript">// nuxt.config.ts -> build 属性
build: {analyze: {// 是否启用分析工具，默认为 falseenabled: true,// 分析报告的输出目录，默认为 '.nuxt/analyze'reportFilename: '.nuxt/analyze/report.html',// 是否在浏览器中自动打开分析报告，默认为 falseopen: 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 分包优化

javascript">// 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 中开启构建压缩，这个不需要安装插件

javascript">// 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 属性

javascript">headers: {'Content-Type': 'application/json','cache-control': 's-maxage=7200', // 缓存2小时},

关于浏览器缓存明细讲解，参考文章浏览器缓存机制介绍与缓存策略剖析

删除代码中多余CSS，JS，无用代码，减轻体量，提高速度。