监视以 Vue.js 编写的应用程序

Vue.js 是一个前端 JavaScript 框架,可用于构建渐进式单页应用程序 (SPA)。 前谷歌员工 Evan You 于 2014 年创建了 Vue.js,其理念是构建具有 Angular 和 React 最佳功能的轻量级解决方案。 自创立之日起,Vue.js 一直稳步地越来越受欢迎。 目前,其用户群是Angular的三倍,比Facebook的React框架略多。

 

Vue 与其他 Javascript 框架有何不同?

让我们将 Vue.js 与其他一些值得注意的 JavaScript 框架进行比较,例如”反应”和”角”。

 

Vue.js vs. 反应

Vue.js 与 React 有许多相似之处,因为它们都利用虚拟 DOM,提供被动、可重用和可组合的组件结构。 两者在性能上几乎相似,但是,Vue.js 在将 HTML 与 JavaScript 代码脱钩方面表现优异。 当您正在处理一个可能有许多组件的大型项目时,这种关注点分离证明是有益的。

 

Vue.js vs. 角

当您将 Vue.js 与 Angular 进行比较时,差异更为明显。 Vue.js 比Angular更容易学习,它有着陡峭的学习曲线,需要事先了解类型化,而不仅仅是JavaScript。 另一方面,学习构建一个简单的Vue.js应用程序可能需要不到一天的时间! Vue.js 也比 Angular 快得多。 但是,最近 Angular 版本的性能与 Vue.js 的性能相当。

 

使用 Vue.js 的优点和缺点是什么?

与任何其他框架一样,Vue.js 也有一些显著的优点和一些缺点。

 

Vue.js 的优势

  • 接近性。 Vue.js 即使对于具备 HTML、CSS 和 JavaScript 基本知识的新手开发人员也很容易学习。
  • 性能。 Vue.js 是一个性能非凡的框架。 一个制作编译和枪口压缩Vue.js项目的重量只有20KB左右。
  • 可伸缩性。 基于组件的体系结构,加上用于 HTML 和 JavaScript 的单独部分,使得维护和扩展 Vue.js 项目变得相当容易。

Vue.js 的缺点

  • 更少的插件/扩展。 插件和扩展的生态系统不尽人意,使得实现某些标准功能的过程非常繁琐。
  • iOS/萨法里的问题。 Vue.js 很难正确处理旧版本的 Safari 和 iOS,尽管您可以通过对代码进行一些修改来修复它们。

需要监控 Vue.js SA 的性能

对于为 Web 构建的任何应用程序,性能优化至关重要。 互联网速度因区域和网络类型而异。 因此,确保应用程序尽快加载至关重要, 需要使用网站监控解决方案。 网站监控可以帮助对 Vue.js 应用程序的各种性能相关方面进行基准测试。 例如,应用程序渲染时间、响应能力以及应用程序在呈现后成为交互式所需的时间。

 

Vue.js 启用并鼓励监视

迄今为止,已经为 Vue.js 构建了许多监视解决方案。 我们将在 Vue.js 中了解监视性能相关指标的确切效果。 例如,页面加载时间、渲染时间、网络请求计时和错误跟踪。

 

NPM 生态系统


NPM
是目前世界上最大的软件注册表。 NPM 最初作为 Node.js 相关包的软件中心启动,但很快被 JavaScript 社区采用,并用于分发所有类型的 JavaScript 包。 如今,NPM 注册表包含超过 800,000 个软件包。 Vue.js 使用 NPM 进行包管理,这使得开发自定义包来处理 APM(应用程序性能管理)对于任何第三方解决方案都非常简单。 网络上的大多数监视解决方案都采用此路由。 您经常会发现您安装了自定义 NPM 包,以便与上述第三方 APM 解决方案集成。 例如,将如下所示:npm 安装 — 保存@third方/apm-vue

对扩展的支持

我们了解到,为 Vue.js 开发包并将其分发到 NPM 中是很容易的。 但是 Vue.js 仍必须提供将这些包集成到代码中的方法。 Vue.js 提供了流畅的 API,使我们能够将插件集成到我们的应用程序中,非常优雅。Vue.use()是一种全局方法,可用于合并插件/扩展。 例如:

  1. 瓦尔
      
    MyPlugin = 需要('pm-vue')
  2. 使用(我的插件,选项)
  3. 
      新的
    维(*
  4.  //...选项 
  5. })

 

Vue.js 也足够智能,可以忽略对同一插件的Vue.use()调用的多个声明,并将其视为一个调用。 此检查有助于我们避免难以追踪的奇怪问题。

 

支持纯 JavaScript 拦截

许多 APM 解决方案提供商不希望为每个 JavaScript 框架开发和维护单独的软件包,我同意这一点,因为其中有相当多的! (角,Vue.js,反应,阿尔卑斯等)。 因此,大多数 APM 解决方案都提供单个 JavaScript 方法,该方法可以插入到任何这些框架中。 这种策略使 AM 能够轻松跟踪 Vue.js 应用程序的性能指标。 例如:

  1. <脚本>
  2.  (function(i,s,o,g,r,a,m){i [APM] =r;i[r]=i[r]||函数()*
  3.  (i[r])。q[i]r]。[.推(参数)],i_r_1=新日期();a_s.create 元素(o),
  4.                 m_s.get元素ByTagName(o)[0];a.异步=1;a.src_g;m.parentNode.插入前(a,m)
  5.  *)(窗口,文件,'脚本',"//eum.apm.io/eum.min.js',"ineum");
  6.  ineum("报告","https://eum-us-west-2.apm.io");
  7. ineum("键","1LHYrJaFQE-L-9KFgd1R6g");
  8. </脚本>

 

您通常必须在项目索引.html 的头标记中添加此类 JavaScript 代码 < > ,其余部分将自动处理。

Vue.js 生命周期挂钩

Vue.js 组件是 UI、逻辑和样式的逻辑分组,用于特定目的。 例如,表组件或导航条组件。 Vue.js 公开了几种方法来挂钩到组件的生命周期中。

 

Vue Lifecycle Events

您可以使用这些
生命周期挂钩
来识别应用程序在每个级别的状态,并识别代码中的关键问题。 大多数 APM 解决方案都在很大程度上使用这些方法。 例如,当您在创建的()挂钩中执行过多工作时,会出现一个典型的性能问题;这是一种不好的做法,因为只有在创建()挂钩中应进行变量的初始化。 否则,它可能会导致组件的延迟渲染。 对于资源密集型操作(Ex、网络呼叫、动画),应改用装载()挂钩。

许多 APM 解决方案通过分析每个生命周期事件中发生的情况,帮助您避免此类常见问题,并为您提供有价值的反馈。

 

导航卫士


Vue 路由器
是 Vue.js 的官方路由器。 此插件负责更新浏览器导航栏中的 URL,并将此 URL 与不同的视图/组件映射,它使构建 SPA 变得轻而易举。 传统上,APM 解决方案很难跟踪这些页面更改,因为没有发生实际的页面导航。 相反,它是页面更改的模拟。 但是,Vue 路由器插件提供
导航防护,
您可以连接到该防护装置并运行自定义逻辑。 例如:

 

1. 路由更改后运行一些逻辑

1. 路由器.后每个(到 > * 

2. 让页面名称 = 到.path 

3.如果(到.匹配 &to.匹配.长度 > 0&&to.匹配{0}路径){ 

4. 页名 = 到.匹配{0}路径 

5. }  

6.  

7. // eslint 禁用下一行无控制台 

8. 控制台.log('将页面设置为",页面名称) 

9. ineum('页面',页面名称) 

10. })

 

2. 在路由更改之前运行逻辑

1. 路由器之前((到,从,下) > |

2. // 收集页面指标

3. 控制台.log(’将页面设置为“,页面名称)

4. ineum(’页面‘,页面名称)

5. ineum(’指标‘,页面指标)

6. })

导航防护功能允许 APM 解决方案对指标页面进行明智分类,并提供特定于页面的见解和报告。 APM 解决方案通常在用户友好的仪表板中显示此类指标,并配有图表和表格。

 

错误处理

Vue.js 还提供一种将
标准错误处理委派
给第三方插件的优雅方法。 这种分离使 APM 解决方案能够访问错误的整个堆栈跟踪,并根据其处理提供有见地的建议。

Vue.config.errorHandler是公开利用此功能的 API。

 

1. var _oldOnError = Vue.config.错误处理程序; 

2. Vue.config.错误处理程序 =函数VueErrorHandler(错误,vm) | 

3. atatus.通知(错误,| 

4. 额外: | 

5. 组件名称:Vue.util.格式组件名称(vm), 

6. 道具数据: vm.$options.propsData 

7. }  

8. }); 

9.  

10.如果(_oldOnError 类型= ' '函数') * 

11. _oldOnError.call(,错误,vm); 

12. }  

13. };

 

许多 AM 使用新技术(如机器学习和 AI)来增强他们对 Vue.js 应用程序中发生的异常和错误的见解。

 

合成监控和测量真实世界性能

上面讨论的 APM 技术可能仍不描述实际性能指标。 由于 SPA 的性质,很难确定从屏幕可见时开始初始化应用程序所需的时间。 要澄清的是,DOM 渲染的时间差异和网页变得可用之间的差别是巨大的! 衡量真实场景的唯一万无一失的方法是定位应用程序的特定操作/部分,并尝试使用人感知的指标来测量性能。

例如,基于协议的监视器在初始加载基于 JavaScript 的页面后不会提供任何数据。 为了获取实际加载时间和指标,我们需要从实际浏览器监视 JavaScript 事件。 这就是合成监视和真实浏览器的用处。 它可以弥合基本 HTTP 响应时间与实际用户交互性能之间的差距。

当今市场上的一些合成监控解决方案非常了解这一点,并围绕改善用户体验的这种理念构建。 Dotcom-Monitor 的
Web 应用程序监视
解决方案使用一个点击式脚本工具,用户可以用它来记录用户流,如登录流程、向购物车添加商品、填写表单等。 然后,这些录制的步骤在众多真正的浏览器和设备上运行。 此方法有助于测量应用程序的实际性能。 它们还确保使用
关键字验证

图像验证
等技术正确加载内容,这些技术会检查加载的内容是否与初始脚本编写期间记录的内容匹配。 此方法对 Vue.js 应用程序有利,无需为安装 NPM 包或外部脚本而附带的应用程序增加不必要的开销。

总之,尽管 Dotcom-Monitor 是一个在运行时操作 DOM 的 JavaScript 框架,但它使得监视和测量使用 Vue.js 构建的动态 Web 应用程序的性能变得相当容易。 该解决方案将上述所有功能整合在一个整合的平台上。 如果您想了解机器学习和 AI 可以带来什么,您应该尝试包含它们的产品。 但是,如果您希望实现一个无忧、经济高效的解决方案,该解决方案只需工作且侵入性较小,则应尝试Dotcom-Monitor。

 

 

“Vue.js 徽标,”由 Evan You,在 CC BY 4.0 下许可

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
电子邮件
Share on print
打印