如何精确量化Vue应用在运行过程中的性能表现？

本文共计659个文字，预计阅读时间需要3分钟。

在上篇文章中，我们探讨了如何提升大数据的性能。然而，我们尚未测量这能提升多少。我们可以使用Chrome DevTools的性能选项来实现这一点。但为了获取准确数据，我们必须要确保在性能标签页中进行设置。

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

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

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

Vue.config.performance = true;

如果你设置了正确的 NODE_ENV 环境变量，那么可以使用非生产环境做判断。

const isDev = process.env.NODE_ENV !== "production"; Vue.config.performance = isDev;

这将在Vue内部激活标记组件性能的User Timing API

上一篇文章内容，我已经在codesandbox上创建了代码。打开 Chrome DevTools 里的 performance 选项并且点击重新加载按钮。

这将记录页面加载性能。同时，感谢你在main.js中的Vue.config.performance设置，这个设置会使你在统计资料能够看到User Timing部分。