翻譯:瘋狂的技術宅
作者:Matthias Sommer
來源:dzone
轉發地址:https://dzone.com/articles/speed-up-your-vuejs-single-page-app
我有一個項目用了 Vue.js 來構建單頁應用程序。隨著上線日期的臨近,性能優化的工作變得越來越重要。在本文中,我收集了有關在加載時間和渲染性能方面提高 Vue.js 應用性能的所有知識。
使用 Vue.js,你可以快速構建單頁應用。Webpack 會為你將所有內容捆綁到文件(HTML、JavaScript、CSS)中,最後可以用 nginx 來提供。至少,這是我們的設置。但是 Webpack 會警告你某些資源太大。
需要注意的是,一旦用戶訪問 SPA,這三個文件將會被加載,並且只有在加載完畢之後才會渲染頁面。但是最初加載的頁面一般不需要太多文件內容,並且不應拖慢用戶訪問我們的網站的速度。
前面小編也整理過關於Vue和Reate 相關的性能優化相關文章,具體學習文章請見本篇文章底部
以下介紹了有關如何緩解此類問題的幾種方法,以及在響應性和性能方面進一步改進 Vue.js 應用的其他方法。
功能組件
功能組件是不包含任何狀態和實例的組件。將無狀態 Vue 組件轉換為功能組件可以大大提高渲染性能。
只需在頂層 template 標記中添加 functional 關鍵字即可:
<code>1...
/<code>
要像以前一樣訪問 prop 和數據,你必須進行一些小的調整。
<code> 1 2{{ props.someProp }}
3 4/<code>
如果你使用 i18n 進行國際化,則必須在 parent 之前加上 $t:
<code>1{{ parent.$t('app.not-found.message') }}/<code>
使用功能組件,我們無權使用方法或計算的 prop。但是,我們仍然可以使用 $options 訪問方法。
<code> 1 23 {{ $options.username(props.user) }} 4
5 6/<code>
延遲加載組件
延遲加載組件可以節省大量的初始下載時間。調用 import() 函數時,將會下載所有延遲加載的資源。對於 Vue 組件,僅在請求渲染時才發生。對話框是註定會這樣的。通常僅在用戶交互後才顯示它們。
<code> 1 23 ... 4 5
6 7/<code>
Webpack 將為 ModalDialog 組件創建一個單獨的塊,該塊不會在頁面加載時立即下載,而是僅在需要時才下載。
注意不要延遲加載應自動顯示的組件。例如以下內容(無提示)將無法加載模式對話框。
<code>1mounted() { 2 this.$bvModal.show('password-check'); 3},/<code>
原因是已安裝的 hook 是在延遲加載模態組件之前進行評估的。
延遲加載路由
構建 SPA 時,JavaScript 捆綁包可能會變得很大,從而增加頁面加載時間。如果我們可以將每個路由的組成部分拆分為一個單獨的塊,然後僅在訪問路由時才加載它們,則效率會更高。
<code>1import ProjectList from '@/components/ProjectList.vue'; 2export const routes = [ 3 { 4 path: '/projects', 5 name: 'projects', 6 component: ProjectList, 7 }, 8]/<code>
定義一個異步組件非常容易,該組件將由 Webpack 自動進行代碼拆分。只需更改導入語句:
<code>1const ProjectList = () => import('@/components/ProjectList.vue');/<code>
除此之外,無需更改路由配置。通過以下方式在生產模式下構建你的應用:
<code>1"build": "vue-cli-service build --mode production"/<code>
並確認會生成很多塊
Vue 和 Webpack 中的代碼拆分
你還可以通過在瀏覽器中打開開發者控制檯來驗證此功能是否正常。在 Network 標籤中,一旦你訪問新路由,就會異步加載多個 JavaScript 文件。在開發模式下,每個塊都將被賦予一個自動遞增的數字。在生產模式下,將使用自動計算的哈希值代替。
延遲加載的塊和預取緩存
Vue 有一個很酷的功能就是 Vue 自動添加 Webpack 的魔術註釋 (https://webpack.js.org/api/module-methods/#magic-comments),以便進一步自動預取其他塊(請參閱預取緩存一節) 。但是,預取僅在瀏覽器完成初始加載並變為空閒之後才開始。
使對象列表不可變
通常,我們將從後端獲取對象列表,例如用戶、項目、文章等。默認情況下,Vue 使數組中每個對象的每個第一級屬性都具有響應性。對於大量對象而言,這代價可能會很大。有時我們只想顯示對象時就不需要去修改它們。
所以在這種情況下,如果我們阻止 Vue 使列表具有響應性,那麼就可以獲得一些性能。我們可以通過使用列表中的 Object.freeze 來做到這一點,例如使其一直不變。
<code>1export async function get(url: string): Promise { 2 const response = await Object.freeze(axios.get(url)); 3 return response.data; 4}/<code>
評估運行時性能
我們已經討論了許多改進 Vue SPA 的方法,但是不知道我們實際獲得了多少性能。可以通過使用瀏覽器中開發者工具的 Performance 標籤來實現。
為了獲得準確的數據,我們必須在 Vue 應用中激活性能模式。讓我們在 main.ts 文件中用開發模式激活它
<code>1Vue.config.performance = process.env.NODE_ENV !== "production";/<code>
這將激活 Vue 內部使用的 User Timing API (https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API。
打開瀏覽器,然後按 F12 鍵打開開發者控制檯。切換到 Performance 選項卡,然後單擊 Start Profiling。在 Chrome 中,“ Timings” 行顯示重要標記,例如 “First Contentful Paint” 和 “First Meanfulful Paint” 時間。你應該嘗試減少它們,以便你的用戶可以儘快使用該網站。
總結
在本文中,我們瞭解瞭如何對路由和組件使用延遲加載以將 SPA 分成多個塊,功能組件如何提高性能以及如何衡量這些改進。
推薦Vue和React學習資料文章:
《聊聊昨晚尤雨溪現場針對Vue3.0 Beta版本新特性知識點彙總》
《【新消息】Vue 3.0 Beta 版本發佈,你還學的動麼?》
《Vue + Koa從零打造一個H5頁面可視化編輯器——Quark-h5》
《深入淺出Vue3 跟著尤雨溪學 TypeScript 之 Ref 【實踐】》
《手把手教你深入淺出vue-cli3升級vue-cli4的方法》
《Vue 3.0 Beta 和React 開發者分別槓上了》
《手把手教你用vue drag chart 實現一個可以拖動 / 縮放的圖表組件》
《
Vue3 嚐鮮》《手把手讓你成為更好的Vue.js開發人員的12個技巧和竅門【實踐】》
《2020 年,Vue 受歡迎程度是否會超過 React?》
《手把手教你Vue解析pdf(base64)轉圖片【實踐】》
《手把手教你Vue之父子組件間通信實踐講解【props、$ref 、$emit】 》
《深入淺出Vue3 的響應式和以前的區別到底在哪裡?【實踐】》
《乾貨滿滿!如何優雅簡潔地實現時鐘翻牌器(支持JS/Vue/React)》
《基於Vue/VueRouter/Vuex/Axios登錄路由和接口級攔截原理與實現》
《手把手教你D3.js 實現數據可視化極速上手到Vue應用》
《吃透 Vue 項目開發實踐|16個方面深入前端工程化開發技巧【上】》
《吃透 Vue 項目開發實踐|16個方面深入前端工程化開發技巧【中】》
《吃透 Vue 項目開發實踐|16個方面深入前端工程化開發技巧【下】 》
《Vue 3.0 Beta 和React 開發者分別槓上了》
《手把手深入Redux react-redux中間件設計及原理(上)【實踐】》
《手把手深入Redux react-redux中間件設計及原理(下)【實踐】》
《為了學好 React Hooks, 我解析了 Vue Composition API》
《【React 高級進階】探索 store 設計、從零實現 react-redux》
《深入淺出掌握React 與 React Native這兩個框架》
《你需要的 React + TypeScript 50 條規範和經驗》
《手把手教你深入淺出實現Vue3 & React Hooks新UI Modal彈窗》
《全平臺(Vue/React/微信小程序)任意角度旋圖片裁剪組件》
翻譯:瘋狂的技術宅
作者:Matthias Sommer
來源:dzone
轉發地址:https://dzone.com/articles/speed-up-your-vuejs-single-page-app