在前端开发中，我们经常需要对我们的应用程序的性能做出度量并进行优化。为了达到这个目的，我们可以使用一个称为 ember-appmetrics 的 npm 包。ember-appmetrics 是一个帮助我们通过指标收集和可视化来监视 Ember 应用程序性能的工具。
在本文中，我们准备了一个简单的教程来为您介绍如何使用 ember-appmetrics 包，以便更好地了解您的应用程序的性能并进行优化。
安装
首先，我们需要在我们的 Ember 应用程序中安装 ember-appmetrics 包。我们可以通过在终端中运行以下命令来执行此操作：
npm install --save-dev ember-appmetrics
然后，我们需要在我们的 ember-cli-build.js 文件中添加以下内容：
let app = new EmberApp(defaults, {
'appmetrics': {
enabled: true
}
});这是我们告诉 ember-appmetrics 启用指标收集的方式。
使用
启用 ember-appmetrics 后，你现在可以在你所在的应用程序中可以使用它的度量。
-- -------------------- ---- -------
-------------------- - --------------------
----------- -----------------------
------------ ---------- -
-- -------
--- ---------------- - ------------------
--------------------------------------------------------------------------
---------------------------- ------------------
--
----------- ---------- -
--- --------------- - ------------------
------------------------------------------------------------------------ -
------- -
----------------- --------------------------
------------------- ----------------------- - -----------------------------------------
-
---
-
---以上代码对我们的 Route 进行了一些操作：在路由转换之前，我们获取了当前时间戳；我们在过度过程中启动了指标收集器，并使用身份验证密钥 'key.transition-to-application-before' 命名；最后，我们计算路由转换的时间并相应地记录，这次使用了身份验证密钥 'key.transition-to-application-after'。
可视化数据
现在，我们正在收集 Ember 应用程序度量，但如何看到运行时数据并进行分析呢？这里是在 Ember 应用程序中可视化数据的最简单方法之一：
-- -------------------- ---- -------
-------------- - ----------------------
----------- -----------------------
------------------- ---------- -
--- ---- - ------------------------------
--- ------ - ---------------------- -
--- ------ - --------------------------------------
--- ------------ - ----------------------
----------------- - ------------------
---------------------------------------- - ------
---------------------- - -
--------- -
--
-------------------- - -
------- -
------ --
------ -
------------ ----
-
--
-
--
------ --------------------
------ -------------------
---------- -----------------------
----- ------------------
------------- --------------------------
-------------- ------------
---
-- ------
------ -------
------------
---这个示例中，我们首先注入了 ember-appmetrics 服务。我们收集了 perfChartsConfig 对象中定义的度量，并使用这些度量初始化了每个具有正确选项的 ChartJS 图表。这些数据可以在任何你的页面视图中使用。
在你的模板中，你可以添加以下代码来呈现数据：
<div class="chart-container" data-chart="{{chart.configuration.type}}"
data-chart-data="{{chart.data}}"
data-chart-title="{{chart.title}}"
data-chart-options="{{chart.chartOptions}}"
data-chart-height="{{chart.configuration.height}}"
data-chart-width="{{chart.configuration.width}}"></div>好了，这就是你可以在你的 Ember 应用程序中使用 ember-appmetrics 包收集数据和可视化数据的全部过程了。现在你有了足够的知识和技能，你可以更好的了解你的程序并进行更多的优化。
示例代码
在这里提供了所有示例代码，请查看以下代码：
-- -------------------- ---- -------
-------------------- - --------------------
----------- -----------------------
------------ ---------- -
-- -------
--- ---------------- - ------------------
--------------------------------------------------------------------------
---------------------------- ------------------
--
----------- ---------- -
--- --------------- - ------------------
------------------------------------------------------------------------ -
------- -
----------------- --------------------------
------------------- ----------------------- - -----------------------------------------
-
---
-
---
-------------- - ----------------------
----------- -----------------------
------------------- ---------- -
--- ---- - ------------------------------
--- ------ - ---------------------- -
--- ------ - --------------------------------------
--- ------------ - ----------------------
----------------- - ------------------
---------------------------------------- - ------
---------------------- - -
--------- -
--
-------------------- - -
------- -
------ --
------ -
------------ ----
-
--
-
--
------ --------------------
------ -------------------
---------- -----------------------
----- ------------------
------------- --------------------------
-------------- ------------
---
-- ------
------ -------
------------
---结论
使用 ember-appmetrics 包帮助您了解您的 Ember 应用程序性能，并为您提供了有用的信息以进行优化。在本文中，我们解释了如何使用它来收集和可视化数据，以及如何使用示例代码进行操作。希望这个教程可以对您有所帮助，让您的应用程序性能更出色！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d5681e8991b448db1c7