Nuxt3之使用lighthouse性能测试及性能优化实操

lighthouse性能测试工具

什么是 LightHouse 呢

Lighthouse 是一个开源的自动化工具，用于提高网页的质量。可以通过浏览器的开发者工具运行，也可以作为命令行工具或 Node.js 模块集成到持续集成系统中。Lighthouse 可以帮助开发者：

• 性能优化：评估网页加载速度和响应时间，提供改进建议。
• 可访问性：检查网页是否符合无障碍标准，确保所有用户都能轻松访问。
• 最佳实践：检测网页是否存在常见的开发错误，如未压缩的资源、不安全的内容等。
• SEO 优化：分析网页的搜索引擎优化情况，提供提升排名的建议。
• PWA 兼容性：评估网页是否符合渐进式 Web 应用（PWA）的标准。

如何使用 LightHouse 呢

使用 Lighthouse 非常简单，只需在 浏览器开发者工具中选择 Lighthouse 面板，设置需要的审计选项，然后点击“Generate report”即可生成详细的报告。报告中不仅包含评分，还提供了具体的优化建议和改进方法。
快捷入口：本文以Edge浏览器窗口为例，（Chrome同理） 点击键盘 F12 根据下图操作即可

性能优化归纳

1. 静态资源优化：
   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 文档关于静态资源存放说明

2. nuxt.config.ts 配置 资源包分析工具

// 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',},},

代码可以直接使用。无需安装插件。开启资源分析配置，可以让你清晰明了的知道构建后的依赖文件大小，能够为分包优化提供指引

3. 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 关于分包文档

4. 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 的页面和组件无缝集成，提供统一的开发体验。

5. 页面代码主体分割
   若SSR页面初始化阶段执行的每个函数代码超过50行，除 API接口 部分，涉及赋值，复杂运算，动画效果，pinia插件缓存的代码，要提取出来另外包装，否则JS运算阶段会造成阻塞，不利于浏览器渲染速度。
   不要套娃！！！不要套娃！！！不要套娃！！！
   JS 是顺序渐进单线程语言，函数套娃在服务端渲染阶段会严重阻塞进程！导致服务端渲染不全面或水合不匹配。

6. 网络图片优化

   • Nuxt 虽然提供了 Nuxt/Image 组件， 但是使用此组件构建后会平白增加近乎50M的体量，我认为不值得。原生Img 的属性配置足矣。
   • 特大超大图片，可使用 图像切片 方法，具体可查阅网络做法。
   • 百K图片，可将图片格式下载为 .svg 或 .webp 格式，存为网络图片，在本地使用 <img loading=“eager”（全速加载-与js加载同步执行，会阻塞进程） 或 loading=“lazy”（懒加载-服务端渲染结束执行，提高首屏渲染速度）
   • 小图片，直接存放在assets目录下
   • 注意：每个图片<img 都需要给图片指定宽高属性，alt属性，利于SEO以及性能加分

7. 善用 Try…Catch…
   在服务端渲染阶段，对API接口函数使用 try…catch… 进行兜底，防止函数error导致整个页面出不来，这样的体验对用户来说是毁灭性打击。

8. 封装一个良好的 request 函数
   Nuxt3 提供了 fetch 的语法糖函数，useFetch、useAsyncData，在性能上，fetch 是远胜于 axios 的。不必再安装个 axios 增加体积又不能在性能上有提升。
   也无需在业务中嵌套各种 Promise ，使用 async … await 更快更简单，同是异步操作，不要重复套娃。
   在服务端渲染阶段，使用 try…catch 对 API 进行 await 操作，可保证服务端完整渲染且不阻塞。

9. 使用浏览器缓存策略
   浏览器缓存可 减少资源反复网络请求消耗，静态资源反复加载的优化效果显著，提高应用页面的访问速度，是前端性能
   优化必不可少的一环。
   做法很简单，对 Http 请求的请求头 header 添加 cache-control 属性

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

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

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