每日前端夜話第323篇

翻譯：瘋狂的技術宅

作者：Matthias Sommer

來源：dzone

正文共：1956?字

預計閱讀時間：10?分鐘

我有一個項目用了 Vue.js 來構建單頁應用程序。隨著上線日期的臨近，性能優化的工作變得越來越重要。在本文中，我收集了有關在加載時間和渲染性能方面提高 Vue.js 應用性能的所有知識。

使用 Vue.js，你可以快速構建單頁應用。Webpack 會為你將所有內容捆綁到文件(HTML、JavaScript、CSS)中，最后可以用 nginx 來提供。至少，這是我們的設置。但是 Webpack 會警告你某些資源太大。

需要注意的是，一旦用戶訪問 SPA，這三個文件將會被加載，并且只有在加載完畢之后才會渲染頁面。但是最初加載的頁面一般不需要太多文件內容，并且不應拖慢用戶訪問我們的網站的速度。

以下介紹了有關如何緩解此類問題的幾種方法，以及在響應性和性能方面進一步改進 Vue.js 應用的其他方法。

功能組件

功能組件是不包含任何狀態和實例的組件。將無狀態 Vue 組件轉換為功能組件可以大大提高渲染性能。

只需在頂層 template 標記中添加 functional 關鍵字即可：

1

要像以前一樣訪問 prop 和數據，你必須進行一些小的調整。

1

如果你使用 i18n 進行國際化，則必須在 parent 之前加上 $t：

1{{?parent.$t(

使用功能組件，我們無權使用方法或計算的 prop。但是，我們仍然可以使用 $options 訪問方法。

1

延遲加載組件

延遲加載組件可以節省大量的初始下載時間。調用 import() 函數時，將會下載所有延遲加載的資源。對于 Vue 組件，僅在請求渲染時才發生。對話框是注定會這樣的。通常僅在用戶交互后才顯示它們。

1

Webpack 將為 ModalDialog 組件創建一個單獨的塊，該塊不會在頁面加載時立即下載，而是僅在需要時才下載。

注意不要延遲加載應自動顯示的組件。例如以下內容(無提示)將無法加載模式對話框。

1mounted()?{

原因是已安裝的 hook 是在延遲加載模態組件之前進行評估的。

延遲加載路由

構建 SPA 時，JavaScript 捆綁包可能會變得很大，從而增加頁面加載時間。如果我們可以將每個路由的組成部分拆分為一個單獨的塊，然后僅在訪問路由時才加載它們，則效率會更高。

1

定義一個異步組件非常容易，該組件將由 Webpack 自動進行代碼拆分。只需更改導入語句：

1

除此之外，無需更改路由配置。通過以下方式在生產模式下構建你的應用：

1

并確認會生成很多塊

Vue 和 Webpack 中的代碼拆分

你還可以通過在瀏覽器中打開開發者控制臺來驗證此功能是否正常。在 Network 標簽中，一旦你訪問新路由，就會異步加載多個 JavaScript 文件。在開發模式下，每個塊都將被賦予一個自動遞增的數字。在生產模式下，將使用自動計算的哈希值代替。

延遲加載的塊和預取緩存

Vue 有一個很酷的功能就是 Vue 自動添加 Webpack 的魔術注釋 (https://webpack.js.org/api/module-methods/#magic-comments)，以便進一步自動預取其他塊(請參閱預取緩存一節) 。但是，預取僅在瀏覽器完成初始加載并變為空閑之后才開始。

使對象列表不可變

通常，我們將從后端獲取對象列表，例如用戶、項目、文章等。默認情況下，Vue 使數組中每個對象的每個第一級屬性都具有響應性。對于大量對象而言，這代價可能會很大。有時我們只想顯示對象時就不需要去修改它們。

所以在這種情況下，如果我們阻止 Vue 使列表具有響應性，那么就可以獲得一些性能。我們可以通過使用列表中的 Object.freeze 來做到這一點，例如使其一直不變。

1

評估運行時性能

我們已經討論了許多改進 Vue SPA 的方法，但是不知道我們實際獲得了多少性能。可以通過使用瀏覽器中開發者工具的 Performance 標簽來實現。

為了獲得準確的數據，我們必須在 Vue 應用中激活性能模式。讓我們在 main.ts 文件中用開發模式激活它

1Vue.config.performance?=?process.env.NODE_ENV?!==?

這將激活 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 分成多個塊，功能組件如何提高性能以及如何衡量這些改進。

原文鏈接

https://dzone.com/articles/speed-up-your-vuejs-single-page-app

?

2020年

京程一燈課程體系上新，這是我們第一次將全部課程列表對外開放。

愿你有個好前程，愿你月薪30K。我們是認真的 ！

點擊文末?閱讀全文?查看細節。

長按二維碼，加大鵬老師微信好友

拉你加入前端技術交流群

嘮一嘮怎樣才能拿高薪

?往期精彩回顧

面向開發人員的十大 NodeJS 框架

JavaScript 類完整指南

講給前端的正則表達式

WebAssembly 正式成為 Web 的第四種語言

2020 年 Node.js 將會有哪些新功能

2020 年 Web 開發展望

從 JavaScript、ES6、ES7 到 ES10，你學到哪兒了？

15個 Vue.js 高級面試題

總結

以上是生活随笔為你收集整理的vue实现div多选全选功能_怎样为你的 Vue.js 单页应用提速的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。