Vue.js 應用性能優化分析+解決方案

Posted on 2021-12-29 by WalkonNet

假設我們在開發整個 Vue 應用程序方面非常努力.js。但沒有優先考慮其性能：現在，我們的應用程序需要一段時間來加載、導航、提交或執行任何用戶操作。我們應該認為用戶是希望這樣的延遲體驗，還是更願意在 Vue js 應用程序上停留更長時間？

可悲的是，答案是否定的。據統計，已經證明，53%的用戶不會選擇花時間在這些應用程序上，需要超過3秒加載。構建具有優化性能的應用程序將平滑用戶體驗並逐步增加用戶交互。

不幸的是，大多數開發人員不瞭解性能的重要性，最終構建瞭具有性能問題的廣泛應用。我想你不想成為這些開發人員之一。開發應用程序具有挑戰性，但開發優化的性能應用程序更具挑戰性。為瞭減輕您的挑戰，我提出瞭這個關於vuejs性能優化的博客，這將有助於您瞭解如何優化您的Vue.js應用程序的結構，以及您如何管理vue js性能。

一、介紹

VueJS 是開發網站最受歡迎、最穩定的 JavaScript 框架，但與其他框架一樣，如果您忽略它，性能就會受到影響。

如果你正在尋找肯定拍攝Vue js性能優化提示或隻是想知道vue最佳實踐，為您的大規模應用程序，你選擇瞭正確的博客。無需多方討論，讓我們詳細討論如何優化 Vue js 應用程序的性能。

首先瞭解 Vue js 應用架構至關重要。通過瞭解它的重要性，我們可以意識到它是多麼重要，我們將開始更嚴肅地對待它。因此，讓我們來看看為什麼需要優化您的大規模應用程序。請記住，任何應用程序的優化是必不可少的，但正如本博客所關註的那樣，我們將討論 vue 性能優化。

二、為什麼我們需要 Vue JS 性能優化？

任何程序員都不希望，即使在編碼瞭數千行之後，用戶也不想花時間在應用程序上，因為執行用戶操作需要花費時間。

世界各地的產品所有者為用戶開發產品，這些用戶主要關心的是其流暢的互動。如果程序員對 Vue js 的性能、速度和效率不滿意，則與最終用戶在 Vue JS 應用架構上投入瞭多少精力無關。

因此，是的，這就是為什麼它成為強制性標準，以優化性能，最終將滿足最終用戶的需求。

三、Vue 性能不佳背後的主要原因

讓我們看看 Vue js 是如何工作的，以及 Vue js 性能不佳背後的重要原因。

降低 Vue 性能的原因取決於您的 Vue js 應用結構。

例如：Vue jS 單頁應用程序（SAS）中性能不佳的重要原因之一可能與處理服務器側渲染（SSR）的 VueJS 項目不同。

任何開發人員都能考慮應用程序是 SPA 還是具有 SSR 的主要原因是捆綁大小。捆綁尺寸越大，Vue js 性能越慢。因此，我們可以得出結論，捆綁大小與應用程序性能成反比。

Vue js 大應用程序背後的一些常見原因 –

不明智地使用第三方庫
忽略代碼分割和惰性加載
對 API 請求的不必要的點擊
未正確構建 JS 和 CSS 文件

在討論如何減少捆綁大小之前，讓我們看看如何檢查 Vue js 和 Vue js 企業應用程序的捆綁大小的大小。

如何檢查您的 VueJS 應用的大小？
我將向您展示兩種方法來檢查 Vue js 應用程序的大小。

1. 生成報告

生成報告可直觀地描述所使用的各種包的大小。此外，您可以找出如何替換任何比預期空間更大的包。您可以使用命令生成報告生成應用程序報告。請記住，此命令將構建一個應用程序的報告，其中安裝瞭 webpack-bundle-analyzer。

運行上述命令後，打開包.json 文件並添加此內容

"build-report": "vue-cli-service build --report"

然後執行此。

npm run build-report

執行所有這些之後，將在dist文件夾中創建一個名為 “報告.html的文件。
打開該文件時，將觀察此

Vue.js 應用性能優化給你專業分析+解決方案#yyds幹貨盤點# _vue

2. 運行命令和npm 運行生成

我們會看到類似這樣的圖像：

Vue.js 應用性能優化給你專業分析+解決方案#yyds幹貨盤點# _vue_02

現在，在找到捆綁包大小後，鬥爭是減少它。無需進一步討論，讓我們繼續探索 Vue .js應用性能優化的方法。

四、如何優化 Vue js 應用程序的性能？

下面是一些 VueJS 性能提示，您可以實現以優化 Vue .js應用程序的性能。

1. 在 Vue js 中懶加載

根據名稱，Vue js 中的懶加載是懶加載應用程序中的模塊的方法，即當用戶實際需要該模塊時。大多數時候，每當用戶訪問網站時，無需加載 JavaScript 捆綁包中的所有模塊。

有一些組件具有模式和工具尖，可在需要時加載。如果您正在處理兩個或三個模態或工具尖，則看不到結果，但是，假設您有一個具有這麼多模式和工具尖的廣泛 Vue 應用程序;一次加載它們會降低您的性能。

它根本不值得每次頁面加載時加載整個捆綁包。因此，它加載有助於您劃分捆綁包並在使用時加載它們。這樣，它通過不下載和解析不必要的代碼來節省時間。

要檢查網站中使用的實際 JavaScript 代碼

Click devtools
cmd + shift + p
Type coverage
Click record

帶有紅色高光的網格不使用，可以懶加載。通過利用懶加載，您可以將捆綁大小減少 60%。

這是關於什麼和為什麼我們應該裝組件和模塊懶加載地大規模應用：讓我們來探討如何執行它。

我們可以使用 Webpack 動態導入而不是常規導入來分離必須懶加載的模塊。

這就是您導入 JavaScript 文件時的輸入方式，對嗎？

// demo.js
const Demo = {
  testDemo: function () {
    console.log("This is just a demo!")
  }
}
export default Demo

// app.js
import Demo from './demo.js'
Demo.testDemo()

它將添加文件演示.js作為應用程序的節點.js在其依賴圖中，並通過以這種方式導入它將其捆綁在一起。因此，每當捆綁包被加載時，演示.js將加載，無論其需要如何。

但是，如果我們要加載演示.js僅作為某些用戶操作響應。在這種情況下，我們將實施動態導入，告訴應用程序下載此模塊僅在需要時。

以下是對上述代碼的修改，用於執行用於測試 Vue .js 應用程序的動態導入

// app.js
const getDemo = () => import('./demo.js')

// later when some user action tasks place as hitting the route
getDemo()
  .then({ testDemo } => testDemo())

因此，您可以註意到，我已宣佈一個功能，該功能確實返回瞭導入功能，而不是直接導入演示模塊。這就是我們所說的動態導入，因此 Webpack 會知道它必須將此模塊保留在單獨的文件中。功能得到Demo（）， 其中包含動態導入，返回承諾。我們基本上切斷節點（這裡演示）從依賴圖，然後下載它，當需要時（如路線更改或點擊）。請記住，演示中導入的模塊 .js也將從捆綁包中分離出來。

Vue js 中的懶加載是減少捆綁尺寸和優化性能的最佳做法之一。養成一種習慣，即知道您不需要哪些模塊，除非有明確的用戶操作，並懶洋洋地下載它們以獲得更好的性能。

2. 基於路線的代碼拆分

假設您必須開發一個帶有兩個網頁的小型 VueJS 網站 – 儀表板和聯系人。即使對於這兩頁，您也需要在項目中實現 vue 路由器。

路由文件可能看起來像這樣 –

// routing.js
import Dashboard from './Dashboard.vue'
import Contact from './Contact.vue'

const routes = [
  { path: '/', component: Dashboard }
  { path: '/contact, component: Contact }
]

由於采用瞭這種標準的編碼方法，即使用戶訪問另一個頁面（我們既不想下載Dashboard也不想下載Contact），也會下載組件——Dashboard和Contact（使用lodash）。這是因為我們在同一個bundle中有兩個路由。你可能會想，多下載兩個頁面有什麼大不瞭的。但是，當您在處理具有大量包的大型應用程序時，這一點很重要。

為瞭避免不必要的組件下載，我們將使用分割代碼。

為此，我們將為不同的路徑使用不同的包，我們遵循動態導入的技術。

現在將通過動態路由，而不是直接導入組件。讓我們看看如何實現這一點。

// routing.js 
const routes = [
  { path: '/', component: () => import('./Dashboard.vue') }
  { path: '/contact, component: () => import('./Contact.vue') }
]

通過遵循此實踐，您可以將捆綁包大小縮小到其一半！但為此，您需要確定哪些組件可用於動態導入。相信我，這樣的vue js 練習將有助於你的應用程序更具執行力。

3.Vue js預加載組件

讓我們繼續深入研究Vue js預加載組件是一種在用戶請求頁面之前下載資源的技術。例如，如果您確定大多數用戶將從類別頁面訪問產品頁面，則可以考慮預取產品頁面。您需要記住，隻有在初始呈現之後才能進行預抓取。預取的另一個好處是，它可以在不影響性能的情況下消除由於延遲加載而導致的不希望看到的結果。

對於它的實現，你隻需要添加 <鏈接rel=”預插”href=“url”/>標簽。很簡單，對吧？但是，在處理 Webpack 時，情況就不同瞭，Webpack 會根據模塊的順序生成捆綁名稱。幸運的是，webpack包有 magic comments，很容易預加載。magic comments是影響構建過程的註釋。我們需要使用- /* webpackPrefetch: true */來預取模塊。隻是保持它在你的動態導入如下所示

components: {
  ModalView: () => import(/* webpackPrefetch: true */ './ModalView.vue')
}

在執行代碼時，Webpack 將搜索神奇的評論，並在頭部分添加 <鏈接 rel=”預插”url=“資源-url”/>。

< link rel="prefetch" href="path-to-chunk-with-modal-view" rel="external nofollow"  />

每當用戶請求 ModalView 模塊時，它就會被預先控制並立即訪問。

4. 優化第三方庫

當您我們查捆綁包大小是多少，並驚訝於如果它越過理想數字時，它並不總是因為您的代碼：很多時候，原因是加載的第三方庫的使用。是的，我們都使用第三方庫，而不知道它們對應用程序性能的影響。我們的代碼可能是捆綁大小的一小部分。

可以使用 bundlephobia來瞭解不同的庫如何影響性能。您隻需要將Vuejs庫名稱添加到這個奇妙的網站，您就會獲得許多與網站數據相關的知識。例如，我已經使用瞭lodash庫，這裡是信息。

瞭解更多關於庫及其對性能的影響不是很棒嗎?

如果您想知道哪些Vue js 庫對您的 VueJS 應用程序有更大的影響，那麼您可以單擊此處掃描您的軟件包。除此之外，我已經明確瞭分析捆綁大小的各種方法。

在選擇任何庫之前，請向自己提出這些問題：

我為什麼要使用庫？
我需要整個庫來達到我的目的嗎？
我選擇的庫有什麼影響？
我有一種性能友好的使用庫的方法嗎？

讓我們來看看我選擇 Vue 庫時如何處理。

如果我的程序需要一些函數，我想安裝lodash庫。

但是，我知道lodash會對性能造成多大的影響，所以我不會導入整個庫，我隻導入函數，就像這樣

import isEmpty from 'lodash/isEmpty`

相信我，在不同的庫進行如此微小的改變將產生更顯著和明顯的影響。

到目前為止，我們已經討論瞭VueJS大型應用程序的bundle大小以及與之相關的VueJS性能技巧。為瞭優化性能，減少bundle大小並不是唯一的解決方案。重用一些資產是必要的，這樣用戶就不必等待。在下一步中，讓我們看看如何使用瀏覽器緩存進行重用。

5. 使用瀏覽器緩存

我們已經就捆綁大小進行瞭充分的討論;在最後一步，我們將專註於緩存數據。

緩存是一種存儲選擇性數據的技術，可在請求時快速訪問數據。

瀏覽器將數據保留在內存緩存中，直到瀏覽器未關閉。

可以觀察。

打開開發人員工具並選擇網絡選項卡。訪問任何網站並重新加載幾次。您會註意到，一些靜態文件（如 CSS、圖像、javascript 和 HTML）將具有內存緩存，如下所示。這意味著此類文件將從內存緩存中送達。

由於瀏覽器自行處理緩存相當好。你可能會想，我們能補充什麼？因此，您隻需要弄清楚 VueJS 應用結構的哪些部分很少與其他部分相比發生變化，以便我們可以緩存這些部分。

假設項目結構是這樣的 –

Main .[hash].js -項目的根組件
Common .[hash].js -項目的常見組件
Dashboard .[hash].js – Dashboard特定組件
Contact .[hash].js -聯系特定的組件

我們關心的部分是常見的。我們可以在這裡擁有所有依賴項，它們不太可能經常更改，我們可以進一步使用它來緩存數據。通過分離這些組件，可以節省用戶的時間。您可以訪問這裡瞭解更多關於如何將依賴項劃分為不同部分的信息。

6. 優化和壓縮圖像

圖片對應用程序的包大小有很大的影響。當應用程序渲染相當大的圖片時，實際上會增加應用程序的加載時間。你可以做的是優化你的方式來提供圖片。為此，你局部壓縮圖像或使用cdn。讓我們看看如何實現這個-

•壓縮本地圖像

如果您的應用程序由 6 到 7 張圖像組成，則可以本地服務。圖像有助於文件大小，因此有必要壓縮圖像以減少文件大小。以下是用於壓縮圖像的 5 大免費在線工具-

Adobe Photoshop
Shrink O’Matic
Image Compressor
CompressNow
TinyPNG

•優化 CDN 圖像

當您處理大量媒體使用的應用程序時，建議在 CDN 上優化圖像。CDN 提供變換功能，可在不像素化和影響 UI 的情況下將圖像大小降低到 70%。如果您的應用程序有 12 到 15 個圖像，那麼此技術是最好的。您可以通過這些平臺來管理媒體 –

ImageKit
Cloudinary

因此，這是所有關於如何優化您的VueJS應用程序性能。我希望你所有的問題和疑問都通過這個博客得到回答。

結論：
無論開發瞭多大的規模應用，都需要在某些時候進行優化。

到此這篇關於Vue.js 應用性能優化分析+解決方案的文章就介紹到這瞭,更多相關Vue.js 應用性能優化分析內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

Vue.js 應用性能優化分析+解決方案

目錄

一、介紹

二、為什麼我們需要 Vue JS 性能優化？

三、Vue 性能不佳背後的主要原因

1. 生成報告

2. 運行命令和npm 運行生成

四、如何優化 Vue js 應用程序的性能？

1. 在 Vue js 中懶加載

2. 基於路線的代碼拆分

3.Vue js預加載組件

4. 優化第三方庫

5. 使用瀏覽器緩存

6. 優化和壓縮圖像

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

一、介紹

二、為什麼我們需要 Vue JS 性能優化？

三、Vue 性能不佳背後的主要原因

1. 生成報告

2. 運行命令和npm 運行生成

四、如何優化 Vue js 應用程序的性能？

1. 在 Vue js 中懶加載

2. 基於路線的代碼拆分

3.Vue js預加載組件

4. 優化第三方庫

5. 使用瀏覽器緩存

6. 優化和壓縮圖像

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆