在上一篇文章中，我们讨论了如何提高大数据的性能。但是我们还没有衡量它有多大的改善。

我们可以使用Chrome DevTools的性能选项来实现这一点。但是为了得到准确的数据，我们必须激活Vue上的性能模式。

我们可以在main.js或插件中设置全局变量。代码如下：

vue . config . performance=true；如果设置正确的NODE_ENV环境变量，可以使用非生产环境进行判断。

const IsDev=process . ENV . NODE _ ENV！==“生产”；vue . config . performance=IsDev；这将激活标记Vue内组件性能的用户计时应用编程接口

在上一篇文章中，我已经在codesandbox上创建了代码。在Chrome开发工具中打开性能选项，然后单击重新加载按钮。

这将记录页面加载性能。同时，感谢您在main.js中设置了Vue.config.performance，这将使您能够在统计数据中看到User Timing部分。

在那里，你会发现三个指标：

Init:创建组件实例所需的时间Render:创建VDom结构所需的时间Patch:将VDom应用于实际Dom所需的时间回到了上一篇文章好奇的地方(性能提高了多少)。因此，普通组件需要417毫秒来初始化：

只需要3.9毫秒就可以阻止对象的默认反应。冻结：

当然，每次运行的结果都会有微小的变化，但性能差异仍然巨大。因为创建组件时会有默认反应，所以可以通过Init(初始化指示器)看到阻止默认反应和不阻止的区别。

就这样！

我的理解

对于vue项目，我们可以在global main.js中将Vue.config.performance设置为true，并通过环境变量来区分是否需要开启，然后通过Chrome DevTools中的performance选项来查看统计性能数据。

结局

水平有限，难免会有错漏。希望大家在轻喷的同时指出，跪下表示感谢！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。