翻譯：測量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的自適應組件