翻译：测量vue应用运行时的性能！

前言

为了提升英文水平，尝试着翻译一些英文技术文章，首先就从这个Vue的小技巧文章开始，目前英文版一共22篇。计划用时2~3个月翻译完成。

目前进度[5/22]

原文

Measure runtime performance in Vue.js apps

译文

在上一篇文章中，咱们讨论了如何提升大型数据的性能。可是咱们尚未测量它提升了多少。

咱们可使用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部分。

在哪里，你会发现3个指标：

• Init：建立组件实例须要的时间
• Render：建立VDom结构须要的时间
• Patch：把VDom应用到实际Dom的时间

回到上一篇文章好奇（性能提升了多少）的地方，结果是：正常的组件须要417毫秒初始化：

而使用Object.freeze阻止了默认反应则只须要3.9毫秒：

固然，每次运行的结果都会有小的变化，可是，仍然有很是巨大的性能差异。因为在建立组件的时候会有默认反应的问题，你能够经过Init（初始化指标）看到阻止了默认反应和没有阻止的差别。

就是这样！

你能够在线阅读文章tip online（能够 复制/粘贴 代码），可是请你记住，若是你喜欢，要和全部同事分享VueDose。

下周见。

个人理解

vue项目，咱们能够经过在全局main.js设置Vue.config.performance为true来开启性能检测，能够经过环境变量来区分是否须要开启，而后就能够经过Chrome DevTools里的 performance 选项去看统计的性能数据。

结尾

水平有限，不免有错漏之处，望各位大大轻喷的同时可以指出，跪谢！

其它翻译

一、翻译：提升vue.js中大型数据的性能
二、翻译：测量vue应用运行时的性能！
三、翻译：使用PurgeCSS删除未使用的CSS
四、翻译：Vue.js 2.6.0 中的新指令v-slot
五、翻译：使用v-bind和v-on的自适应组件