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

javascript 复制代码
// 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',
    },
  },

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

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

  1. 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 的页面和组件无缝集成,提供统一的开发体验。
  1. 页面代码主体分割

    若SSR页面初始化阶段执行的每个函数代码超过50行,除 API接口 部分,涉及赋值,复杂运算,动画效果,pinia插件缓存的代码,要提取出来另外包装,否则JS运算阶段会造成阻塞,不利于浏览器渲染速度。

    不要套娃!!!不要套娃!!!不要套娃!!!

    JS 是顺序渐进单线程语言,函数套娃在服务端渲染阶段会严重阻塞进程!导致服务端渲染不全面或水合不匹配。

  2. 网络图片优化

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

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

  4. 封装一个良好的 request 函数

    Nuxt3 提供了 fetch 的语法糖函数,useFetch、useAsyncData,在性能上,fetch 是远胜于 axios 的。不必再安装个 axios 增加体积又不能在性能上有提升。

    也无需在业务中嵌套各种 Promise ,使用 async ... await 更快更简单,同是异步操作,不要重复套娃。

    在服务端渲染阶段,使用 try...catch 对 API 进行 await 操作,可保证服务端完整渲染且不阻塞。

  5. 使用浏览器缓存策略

    浏览器缓存可 减少资源反复网络请求消耗,静态资源反复加载的优化效果显著,提高应用页面的访问速度,是前端性能

    优化必不可少的一环。

    做法很简单,对 Http 请求的请求头 header 添加 cache-control 属性

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

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

  1. 删除代码中多余CSS,JS,无用代码,减轻体量,提高速度。
相关推荐
喜欢敲代码的程序员23 分钟前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
foxhuli22933 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript