建设嘉陵摩托车官方网站,如何查到网站建设,手机版网站开发html5,深圳网络搭建lighthouse性能测试工具
什么是 LightHouse 呢
Lighthouse 是一个开源的自动化工具#xff0c;用于提高网页的质量。可以通过浏览器的开发者工具运行#xff0c;也可以作为命令行工具或 Node.js 模块集成到持续集成系统中。Lighthouse 可以帮助开发者#xff1a;
性能优化…lighthouse性能测试工具
什么是 LightHouse 呢
Lighthouse 是一个开源的自动化工具用于提高网页的质量。可以通过浏览器的开发者工具运行也可以作为命令行工具或 Node.js 模块集成到持续集成系统中。Lighthouse 可以帮助开发者
性能优化评估网页加载速度和响应时间提供改进建议。可访问性检查网页是否符合无障碍标准确保所有用户都能轻松访问。最佳实践检测网页是否存在常见的开发错误如未压缩的资源、不安全的内容等。SEO 优化分析网页的搜索引擎优化情况提供提升排名的建议。PWA 兼容性评估网页是否符合渐进式 Web 应用PWA的标准。
如何使用 LightHouse 呢
使用 Lighthouse 非常简单只需在 浏览器开发者工具中选择 Lighthouse 面板设置需要的审计选项然后点击“Generate report”即可生成详细的报告。报告中不仅包含评分还提供了具体的优化建议和改进方法。 快捷入口本文以Edge浏览器窗口为例Chrome同理 点击键盘 F12 根据下图操作即可 性能优化归纳 静态资源优化 Nuxt3 静态资源目录有Public Assets ① 共性均是存放 cssjsimg 等静态资源文件 ② 编译区别 public 在打包过程中文件不会被编译或处理直接原样复制到输出目录。 sssets 目录则是存放需要经过构建、编译处理的静态资源。 ③ 引用区别 public 资源在页面中引用/img/avatar.png assets 资源在页面中引用~/assets/img/avatar.png 建议将cssimgsvgtxtjsonjs 文件放在 assets 目录下打包时经过 vite 构建生成哈希值的文件名可提高缓存效率同时配置压缩工具进一步压缩包体积也可提高性能。 依据参考 Vite 文档关于静态资源存放说明 nuxt.config.ts 配置 资源包分析工具
// nuxt.config.ts - build 属性
build: {analyze: {// 是否启用分析工具默认为 falseenabled: true,// 分析报告的输出目录默认为 .nuxt/analyzereportFilename: .nuxt/analyze/report.html,// 是否在浏览器中自动打开分析报告默认为 falseopen: true,// 分析器类型可选值有 webpack-bundle-analyzer 和 source-map-exploreranalyzerMode: 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-maxage7200, // 缓存2小时},关于浏览器缓存明细讲解参考文章 浏览器缓存机制介绍与缓存策略剖析
删除代码中多余CSSJS无用代码减轻体量提高速度。
