介绍
@microsoft/mezzurite-react 是一个使用React构建基于Mezzurite性能分析平台的JavaScript性能测量库。Mezzurite是Microsoft公司对性能测量的一次改进，其可以快速精准地测量多种重要的Web应用程序性能指标。
安装
在项目目录下运行以下命令：
npm install @microsoft/mezzurite-react
使用
导入包
在你的React组件中导入MezzuriteReact组件：
import MezzuriteReact from '@microsoft/mezzurite-react';
使用组件
在组件中使用MezzuriteReact组件：
<MezzuriteReact/>
其中可以设置的属性有：
- name: (required) 应用程序名称或唯一标识符，用于正确识别和区分不同的Web应用程序。该属性必须是一个字符串。
- subName: 应用程序的子级名称或标识符，用于将应用程序的不同页面或部分区分开来。该属性可以是字符串或数组。
- measurements: 应用程序性能测量需要跟踪的度量名称。缺省: Fmp; Fcp.P; Tti.V; Nav.Tm; Ld.E.该属性可以是字符串或数组。
- logToConsole: 是否将跟踪信息输出到控制台中。默认为false，表示不输出。该属性可以是布尔值。
- startImmediately: 是否立即开始跟踪应用程序性能。默认为true表示立即开始。该属性可以是布尔值。
- disabled: 是否禁用MezzuriteReact组件。默认值为false表示未禁用。该属性可以是布尔值。
示例代码如下：
<MezzuriteReact
name="my-app"
subName="home-page"
measurements={['Ttfb', 'Nav.Tm']}
logToConsole={true}
startImmediately={false}
disabled={false}
/>功能点
应用程序名称
属性name应该是对您的Web应用程序名称的描述，该名称应该是您的应用程序应该唯一标识的完整具有意义的用语。它应该描述应用程序的名称和类型。
应用程序子级
属性subName是一个可选属性，可以帮助您更全面地了解应用程序的内容。将subName设置为应用程序页面的名称或标识符，以便更好地测量不同页面之间的性能差异。
应用程序度量
测量属性是描述所测量的度量名称的完整具有意义的用语。 度量应该被描述为应用程序的性能特征或内容。性能指标的完整列表可以在Mezzurite文档中找到。
控制台日志
您还可以使用logToConsole属性将跟踪信息输出到控制台。这在调试和优化应用程序性能时很有用。
立即开始
立即开始属性startImmediately设置为false，启动后即可缓解性能问题。 在某些情况下，启动页面跟踪可能会导致应用程序負载增加。在这种情况下，您可以将startImmediately设置为false，从而暂时缓解性能问题。
禁用MezzuriteReact组件
如果您想在任何时候禁止MezzuriteReact组件，请将禁用状态设置为true。
结论
使用@microsoft/mezzurite-react，您可以精确地跟踪您的应用程序的性能，以便识别问题并快速解决它们。 此外，您还可以使用Mezzurite网站和应用程序中的可视visual 后端记录，以便更全面地了解性能问题。 完整的Mezzurite文档和上下文可以在Mezzurite网站中找到。 我们希望这篇文章已经为您提供了关于MezzuriteReact的测量和使用的深入见解，以便更好地提高您应用程序的性能。
示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------------
------ -------------- ---- -----------------------------
-------- ----- -
----- --------- ----------- - ------------
----- ----------- - -- -- - ------------------ - -- --
------ -
--------------- ------------- --------------------
---- ----------------
------- -----------------------
----- ------- ------
------- ----------------------------------------
---------
------
-----------------
--
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735c890c4f7277583fd1