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

這篇文章主要為大家展示了“如何優化Vue js應用程序的性能”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何優化Vue js應用程序的性能”這篇文章吧。

一、介紹

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

二、為什么我們需要 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

以上是“如何優化Vue js應用程序的性能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！