Vue.js 應用性能優化，給你專業的分析+解決方案

目錄

介紹

為什么我們需要 Vue JS 性能優化？

Vue 性能不佳背后的主要原因

如何檢查您的 VueJS 應用的大小？

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

1. 在 Vue js 中懶加載

2. 基于路線的代碼拆分

3.Vue js預加載組件

4. 優化第三方庫

5. 使用瀏覽器快取

6. 優化和壓縮影像

結論

最后

假設您在開發整個 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應用程式性能，我希望你所有的問題和疑問都通過這個博客得到回答，

結論

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

最后

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

博主為人老實，無償解答問題哦?

歡迎查找公_號?：前端老實人，獲取更多資料~