如何優(yōu)化Vue js應(yīng)用程序的性能

這篇文章主要為大家展示了“如何優(yōu)化Vue js應(yīng)用程序的性能”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何優(yōu)化Vue js應(yīng)用程序的性能”這篇文章吧。

一、介紹

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

二、為什么我們需要 Vue JS 性能優(yōu)化？

任何程序員都不希望，即使在編碼了數(shù)千行之后，用戶也不想花時間在應(yīng)用程序上，因為執(zhí)行用戶操作需要花費時間。

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

因此，是的，這就是為什么它成為強制性標(biāo)準(zhǔn)，以優(yōu)化性能，最終將滿足最終用戶的需求。

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

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

降低 Vue 性能的原因取決于您的 Vue js 應(yīng)用結(jié)構(gòu)。

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

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

Vue js 大應(yīng)用程序背后的一些常見原因 -

• 不明智地使用第三方庫

• 忽略代碼分割和惰性加載

• 對 API 請求的不必要的點擊

• 未正確構(gòu)建 JS 和 CSS 文件
  

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

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

1. 生成報告

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

運行上述命令后，打開包.json 文件并添加此內(nèi)容

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

然后執(zhí)行此 。

npm run build-report

執(zhí)行所有這些之后，將在dist文件夾中創(chuàng)建一個名為 "報告.html的文件。
打開該文件時， 將觀察此

Vue.js 應(yīng)用性能優(yōu)化給你專業(yè)分析+解決方案#yyds干貨盤點# _vue

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

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

Vue.js 應(yīng)用性能優(yōu)化給你專業(yè)分析+解決方案#yyds干貨盤點# _vue_02

現(xiàn)在，在找到捆綁包大小后，斗爭是減少它。無需進一步討論，讓我們繼續(xù)探索 Vue .js應(yīng)用性能優(yōu)化的方法。

四、如何優(yōu)化 Vue js 應(yīng)用程序的性能？

下面是一些 VueJS 性能提示，您可以實現(xiàn)以優(yōu)化 Vue .js應(yīng)用程序的性能。

1. 在 Vue js 中懶加載

根據(jù)名稱，Vue js 中的懶加載是懶加載應(yīng)用程序中的模塊的方法，即當(dāng)用戶實際需要該模塊時。大多數(shù)時候，每當(dāng)用戶訪問網(wǎng)站時，無需加載 JavaScript 捆綁包中的所有模塊。

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

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

要檢查網(wǎng)站中使用的實際 JavaScript 代碼

• Click devtools

• cmd + shift + p

• Type coverage

• Click record


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

這是關(guān)于什么和為什么我們應(yīng)該裝組件和模塊懶加載地大規(guī)模應(yīng)用：讓我們來探討如何執(zhí)行它。

我們可以使用 Webpack 動態(tài)導(dǎo)入而不是常規(guī)導(dǎo)入來分離必須懶加載的模塊。

這就是您導(dǎo)入 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作為應(yīng)用程序的節(jié)點.js在其依賴圖中，并通過以這種方式導(dǎo)入它將其捆綁在一起。因此，每當(dāng)捆綁包被加載時，演示.js將加載，無論其需要如何。

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

以下是對上述代碼的修改，用于執(zhí)行用于測試 Vue .js 應(yīng)用程序的動態(tài)導(dǎo)入

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

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

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

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

2. 基于路線的代碼拆分

假設(shè)您必須開發(fā)一個帶有兩個網(wǎng)頁的小型 VueJS 網(wǎng)站 - 儀表板和聯(lián)系人。即使對于這兩頁，您也需要在項目中實現(xiàn) vue 路由器。

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

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

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

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

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

為此，我們將為不同的路徑使用不同的包，我們遵循動態(tài)導(dǎo)入的技術(shù)。

現(xiàn)在將通過動態(tài)路由，而不是直接導(dǎo)入組件。讓我們看看如何實現(xiàn)這一點。

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

通過遵循此實踐，您可以將捆綁包大小縮小到其一半！但為此，您需要確定哪些組件可用于動態(tài)導(dǎo)入。相信我， 這樣的vue js 練習(xí)將有助于你的應(yīng)用程序更具執(zhí)行力。

3.Vue js預(yù)加載組件

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

對于它的實現(xiàn)，你只需要添加 <鏈接rel="預(yù)插"href=“url”/>標(biāo)簽。很簡單，對吧？但是，在處理 Webpack 時，情況就不同了，Webpack 會根據(jù)模塊的順序生成捆綁名稱。幸運的是，webpack包有 magic comments，很容易預(yù)加載。magic comments是影響構(gòu)建過程的注釋。 我們需要使用- /* webpackPrefetch: true */來預(yù)取模塊。 只是保持它在你的動態(tài)導(dǎo)入如下所示

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

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

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

每當(dāng)用戶請求 ModalView 模塊時，它就會被預(yù)先控制并立即訪問。

4. 優(yōu)化第三方庫

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

可以使用 bundlephobia來了解不同的庫如何影響性能。您只需要將Vuejs庫名稱添加到這個奇妙的網(wǎng)站，您就會獲得許多與網(wǎng)站數(shù)據(jù)相關(guān)的知識。 例如，我已經(jīng)使用了lodash庫，這里是信息。

了解更多關(guān)于庫及其對性能的影響不是很棒嗎?

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

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

• 我為什么要使用庫？

• 我需要整個庫來達到我的目的嗎？

• 我選擇的庫有什么影響？

• 我有一種性能友好的使用庫的方法嗎？
  

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

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

但是，我知道lodash會對性能造成多大的影響，所以我不會導(dǎo)入整個庫，我只導(dǎo)入函數(shù)，就像這樣

import isEmpty from 'lodash/isEmpty`

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

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

5. 使用瀏覽器緩存

我們已經(jīng)就捆綁大小進行了充分的討論;在最后一步，我們將專注于緩存數(shù)據(jù)。

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

瀏覽器將數(shù)據(jù)保留在內(nèi)存緩存中，直到瀏覽器未關(guān)閉。

可以觀察。

打開開發(fā)人員工具并選擇網(wǎng)絡(luò)選項卡。訪問任何網(wǎng)站并重新加載幾次。您會注意到，一些靜態(tài)文件（如 CSS、圖像、javascript 和 HTML）將具有內(nèi)存緩存，如下所示。這意味著此類文件將從內(nèi)存緩存中送達。

由于瀏覽器自行處理緩存相當(dāng)好。你可能會想，我們能補充什么？因此，您只需要弄清楚 VueJS 應(yīng)用結(jié)構(gòu)的哪些部分很少與其他部分相比發(fā)生變化，以便我們可以緩存這些部分。

假設(shè)項目結(jié)構(gòu)是這樣的 -

• Main .[hash].js -項目的根組件

• Common .[hash].js -項目的常見組件

• Dashboard .[hash].js - Dashboard特定組件

• Contact .[hash].js -聯(lián)系特定的組件
  

我們關(guān)心的部分是常見的。 我們可以在這里擁有所有依賴項，它們不太可能經(jīng)常更改，我們可以進一步使用它來緩存數(shù)據(jù)。 通過分離這些組件，可以節(jié)省用戶的時間。 您可以訪問這里了解更多關(guān)于如何將依賴項劃分為不同部分的信息。

6. 優(yōu)化和壓縮圖像

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

?壓縮本地圖像

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

• Adobe Photoshop

• Shrink O'Matic

• Image Compressor

• CompressNow

• TinyPNG
  

?優(yōu)化 CDN 圖像

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

• ImageKit

• Cloudinary

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