您的位置:首页 > 健康 > 养生 > 武汉网站seo设计_重庆ppt制作_抖音seo点击软件排名_电脑优化大师下载安装

武汉网站seo设计_重庆ppt制作_抖音seo点击软件排名_电脑优化大师下载安装

2024/12/23 20:02:56 来源:https://blog.csdn.net/qq_43869364/article/details/143620490  浏览:    关键词:武汉网站seo设计_重庆ppt制作_抖音seo点击软件排名_电脑优化大师下载安装
武汉网站seo设计_重庆ppt制作_抖音seo点击软件排名_电脑优化大师下载安装

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

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

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

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

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

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com