前言:

假設(shè)我們在開發(fā)整個(gè) Vue 應(yīng)用程序方面非常努力.js。但沒有優(yōu)先考慮其性能：現(xiàn)在，我們的應(yīng)用程序需要一段時(shí)間來加載、導(dǎo)航、提交或執(zhí)行任何用戶操作。我們應(yīng)該認(rèn)為用戶是希望這樣的延遲體驗(yàn)，還是更愿意在 Vue js 應(yīng)用程序上停留更長時(shí)間？

可悲的是，答案是否定的。據(jù)統(tǒng)計(jì)，已經(jīng)證明 ，53%的用戶不會選擇花時(shí)間在這些應(yīng)用程序上，需要超過3秒加載。構(gòu)建具有優(yōu)化性能的應(yīng)用程序?qū)⑵交脩趔w驗(yàn)并逐步增加用戶交互。

不幸的是，大多數(shù)開發(fā)人員不了解性能的重要性，最終構(gòu)建了具有性能問題的廣泛應(yīng)用。我想你不想成為這些開發(fā)人員之一。開發(fā)應(yīng)用程序具有挑戰(zhàn)性，但開發(fā)優(yōu)化的性能應(yīng)用程序更具挑戰(zhàn)性。為了減輕您的挑戰(zhàn)，我提出了這個(gè)關(guān)于vuejs性能優(yōu)化的博客，這將有助于您了解如何優(yōu)化您的Vue.js應(yīng)用程序的結(jié)構(gòu)，以及您如何管理vue js性能。

一、介紹

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

如果你正在尋找肯定拍攝Vue js性能優(yōu)化提示或只是想知道vue最佳實(shí)踐，為您的大規(guī)模應(yīng)用程序，你選擇了正確的博客。無需多方討論，讓我們詳細(xì)討論如何優(yōu)化 Vue js 應(yīng)用程序的性能。

首先了解 Vue js 應(yīng)用架構(gòu)至關(guān)重要。通過了解它的重要性，我們可以意識到它是多么重要，我們將開始更嚴(yán)肅地對待它。因此，讓我們來看看為什么需要優(yōu)化您的大規(guī)模應(yīng)用程序。請記住，任何應(yīng)用程序的優(yōu)化是必不可少的，但正如本博客所關(guān)注的那樣，我們將討論 vue 性能優(yōu)化。

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

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

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

因此，是的，這就是為什么它成為強(qiáng)制性標(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 項(xiàng)目不同。

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

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

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

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

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

1. 生成報(bào)告

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

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

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

然后執(zhí)行此 。

npm run build-report

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

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

2. 運(yùn)行命令和npm 運(yùn)行生成

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

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

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

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

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

1. 在 Vue js 中懶加載

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

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

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

要檢查網(wǎng)站中使用的實(shí)際 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 文件時(shí)的輸入方式，對嗎？

// 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é)點(diǎn).js在其依賴圖中，并通過以這種方式導(dǎo)入它將其捆綁在一起。因此，每當(dāng)捆綁包被加載時(shí)，演示.js將加載，無論其需要如何。

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

以下是對上述代碼的修改，用于執(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())

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

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

2. 基于路線的代碼拆分

假設(shè)您必須開發(fā)一個(gè)帶有兩個(gè)網(wǎng)頁的小型 VueJS 網(wǎng)站 - 儀表板和聯(lián)系人。即使對于這兩頁，您也需要在項(xiàng)目中實(shí)現(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)的編碼方法，即使用戶訪問另一個(gè)頁面（我們既不想下載Dashboard也不想下載Contact），也會下載組件——Dashboard和Contact（使用lodash）。 這是因?yàn)槲覀冊谕粋€(gè)bundle中有兩個(gè)路由。 你可能會想，多下載兩個(gè)頁面有什么大不了的。 但是，當(dāng)您在處理具有大量包的大型應(yīng)用程序時(shí)，這一點(diǎn)很重要。

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

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

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

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

通過遵循此實(shí)踐，您可以將捆綁包大小縮小到其一半！但為此，您需要確定哪些組件可用于動態(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)之后才能進(jìn)行預(yù)抓取。 預(yù)取的另一個(gè)好處是，它可以在不影響性能的情況下消除由于延遲加載而導(dǎo)致的不希望看到的結(jié)果。

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

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

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

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

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

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

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

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

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

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

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

• 我為什么要使用庫？
• 我需要整個(gè)庫來達(dá)到我的目的嗎？
• 我選擇的庫有什么影響？
• 我有一種性能友好的使用庫的方法嗎？
  

讓我們來看看我選擇 Vue 庫時(shí)如何處理。

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

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

import isEmpty from 'lodash/isEmpty`

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

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

5. 使用瀏覽器緩存

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

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

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

可以觀察。

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

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

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

• Main .[hash].js -項(xiàng)目的根組件
• Common .[hash].js -項(xiàng)目的常見組件
• Dashboard .[hash].js - Dashboard特定組件
• Contact .[hash].js -聯(lián)系特定的組件
  

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

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

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

?壓縮本地圖像

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

• Adobe Photoshop
• Shrink O'Matic
• Image Compressor
• CompressNow
• TinyPNG
  

?優(yōu)化 CDN 圖像

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

• ImageKit
• Cloudinary
  

因此，這是所有關(guān)于如何優(yōu)化您的VueJS應(yīng)用程序性能。我希望你所有的問題和疑問都通過這個(gè)博客得到回答。

結(jié)論：
無論開發(fā)了多大的規(guī)模應(yīng)用，都需要在某些時(shí)候進(jìn)行優(yōu)化。

到此這篇關(guān)于Vue.js 應(yīng)用性能優(yōu)化分析+解決方案的文章就介紹到這了,更多相關(guān)Vue.js 應(yīng)用性能優(yōu)化分析 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論