Vue.js 效能優化方案

假設您在開發整個 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的檔案。
開啟該檔案時，您將觀察此

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

你會看到類似這樣的影象。

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

如何優化 Vue js 應用程式的效能？

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

1. 在 Vue js 中懶載入

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

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

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

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

1. Click devtools
2. cmd + shift + p
3. Type coverage
4. 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" />

每當使用者請求 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應用程式效能。我希望你所有的問題和疑問都通過這個部落格得到回答。

結論

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

最後 

製作不易，如果對您有幫助，希望能給個👍評論/收藏/三連！

公_號：前端老實人，無償解答問題哦❤