在上一篇Vue.js應(yīng)用性能優(yōu)化二中，我們學(xué)習(xí)了足夠強(qiáng)大的模式，可以顯著提高應(yīng)用程序的性能 - 按照路由分割代碼。雖然按照路由拆分代碼非常有用，但在用戶訪問我們的站點(diǎn)后，仍然有很多內(nèi)部代碼不需要。在本系列的這一部分中，我們將重點(diǎn)關(guān)注代碼拆分我們的狀態(tài)管理 - Vuex模塊。

---

系列文章：

Vue.js應(yīng)用性能優(yōu)化一

Vue.js應(yīng)用性能優(yōu)化二

構(gòu)建Vue.js組件的10個(gè)技巧

如何使用Vue.js渲染JSON中定義的動(dòng)態(tài)組件

Vuejs代碼實(shí)踐上篇

Vuejs代碼實(shí)踐中篇

---

兩種類型的Vuex模塊

在我們進(jìn)一步了解如何懶加載Vuex模塊之前，您需要注意一件重要的事情。您需要了解注冊(cè)Vuex模塊的方法有哪些，以及它們的優(yōu)缺點(diǎn)。

靜態(tài)Vuex模塊在Store初始化期間聲明。以下是顯式創(chuàng)建的靜態(tài)模塊的示例：

上面的代碼將創(chuàng)建一個(gè)帶有靜態(tài)模塊userAccountModule的新Vuex Store。靜態(tài)模塊不能取消注冊(cè)(也不能延遲注冊(cè))，并且在Store初始化后不能更改它們的結(jié)構(gòu)(不是狀態(tài)！)。

雖然這種限制對(duì)于大多數(shù)模塊來說都不是問題，并且在一個(gè)地方聲明，那么所有與數(shù)據(jù)相關(guān)的東西都可以保存在一個(gè)地方。但這種方法存在一些缺點(diǎn)。

假設(shè)我們的應(yīng)用程序中有一個(gè)Admin Dashboard，它關(guān)聯(lián)一個(gè)專用Vuex模塊adminModule。

你可以想象這樣的模塊可能非常龐大。盡管儀表板將僅由一小部分用戶和應(yīng)用程序的受限區(qū)域(假設(shè)在/admin路徑下)使用，由于靜態(tài)Vuex模塊的集中注冊(cè)，它的所有代碼都將在主程序包中。

這當(dāng)然不是我們想要的結(jié)果。我們需要一種方法只在/admin路由中加載這個(gè)模塊。您可能已經(jīng)猜到靜態(tài)模塊無法滿足我們的需求。所有靜態(tài)模塊都需要在創(chuàng)建Vuex Store時(shí)注冊(cè)，因此以后無法注冊(cè)。

這是動(dòng)態(tài)模塊可以幫助我們的地方！

在創(chuàng)建Vuex Store后，可以注冊(cè)與靜態(tài)模塊相反的動(dòng)態(tài)模塊。這個(gè)簡(jiǎn)潔的功能意味著我們不需要在應(yīng)用程序初始化時(shí)下載動(dòng)態(tài)模塊，并且可以將其打包在不同的代碼塊中，或者在需要時(shí)懶加載。

首先讓我們看一下以前的代碼使用動(dòng)態(tài)注冊(cè)管理模塊之后的樣子。

不是將adminModule對(duì)象直接傳遞到我們store的modules屬性，而是在創(chuàng)建Store之后，使用registerModule方法注冊(cè)它。

動(dòng)態(tài)注冊(cè)不需要在模塊內(nèi)部進(jìn)行任何更改，因此可以靜態(tài)或動(dòng)態(tài)地注冊(cè)任何Vuex模塊。

當(dāng)然，在目前的形式下，這個(gè)動(dòng)態(tài)注冊(cè)的模塊并沒有給我們?nèi)魏魏锰帯?/p>

適當(dāng)?shù)拇a分割Vuex模塊

現(xiàn)在我們知道如何動(dòng)態(tài)注冊(cè)管理模塊，我們當(dāng)然可以嘗試將它的代碼放入/admin route bundle。

讓我們暫時(shí)停下來，簡(jiǎn)要了解我們正在使用的應(yīng)用程序。

在router.js中，我們有兩個(gè)懶加載的代碼分割路由。使用我們上面看到的代碼，我們的admin Vuex模塊仍然在主app.js包中，因?yàn)樗莝tore.js中的靜態(tài)導(dǎo)入。

讓我們解決這個(gè)問題，并將此模塊僅交付給輸入/admin路由的用戶，以便其他人不會(huì)下載冗余代碼。

為此，我們將在/admin路由組件中加載管理模塊，而不是導(dǎo)入并注冊(cè)它在store.js。

我們來看看發(fā)生了什么！

我們?cè)贏dmin.vue(/admin route)mounted后，導(dǎo)入和注冊(cè)admin Store。稍后在代碼中，一旦用戶退出管理面板，我們就會(huì)取消注冊(cè)該模塊，以防止同一模塊的多次注冊(cè)。

現(xiàn)在因?yàn)閍dmin模塊是在Admin.vue而不是store.js中導(dǎo)入的，所以它將與代碼分割的Admin.vue打包在一起！

重要說明：如果您正在使用SSR模式，請(qǐng)確保在mounted鉤子中注冊(cè)模塊。否則它可能導(dǎo)致內(nèi)存泄漏，因?yàn)樵诜?wù)器端沒有beforeDestroy鉤子。

現(xiàn)在我們知道如何動(dòng)態(tài)注冊(cè)Vuex模塊，并將路由模塊分發(fā)到適當(dāng)?shù)陌小Ｏ逻呑屛覀儊砜纯瓷晕?fù)雜一些的用例。

延遲加載Vuex模塊

假設(shè)我們?cè)贖ome.vue上有推薦部分，我們希望展示一些用戶推薦評(píng)語。但是我們不想在用戶進(jìn)入我們的網(wǎng)站后立即顯示它們。只有在用戶需要時(shí)才能顯示它們。我們可以添加“顯示推薦”按鈕，點(diǎn)擊后會(huì)加載并顯示其下方的推薦。

要存儲(chǔ)推薦數(shù)據(jù)，我們還需要一個(gè)Vuex模塊。我們稱之為推薦模塊。該模塊將負(fù)責(zé)顯示以前添加的推薦和添加新推薦。我們不需要了解實(shí)現(xiàn)細(xì)節(jié)。

我們希望只有用戶點(diǎn)擊按鈕才去請(qǐng)求下載推薦模塊代碼，因?yàn)橹安恍枰Ｗ屛覀兛纯慈绾卫脛?dòng)態(tài)模塊注冊(cè)和動(dòng)態(tài)導(dǎo)入來實(shí)現(xiàn)此功能。 Testimonials.vue是Home.vue中的一個(gè)組件。

當(dāng)用戶單擊Show Testimonials按鈕時(shí)，將調(diào)用getTestimonials()方法。它負(fù)責(zé)調(diào)用getTestimonialsModule()來獲取testimonials.js。一旦promise resovled(這意味著加載了模塊)，我們就會(huì)動(dòng)態(tài)注冊(cè)它并調(diào)度負(fù)責(zé)獲取推薦的動(dòng)作action。

由于動(dòng)態(tài)導(dǎo)入，testimonials.js內(nèi)容被打包到一個(gè)單獨(dú)的文件中，只有在調(diào)用getTestimonialsModule方法時(shí)才會(huì)下載該文件。

當(dāng)我們需要退出管理面板時(shí)，在beforeDestroy生命周期鉤子中取消注冊(cè)模塊，這樣如果我們?cè)俅芜M(jìn)入，就不會(huì)重復(fù)注冊(cè)模塊。

總結(jié)

即使靜態(tài)Vuex模塊注冊(cè)對(duì)于大多數(shù)用例來說已足夠，但在某些情況下我們可能希望使用動(dòng)態(tài)注冊(cè)。

如果只在特定路由上需要模塊，那么我們可以在適當(dāng)?shù)穆酚山M件中動(dòng)態(tài)注冊(cè)它，這樣它就不會(huì)在主bundle中存在。

如果只是在一些交互之后才需要模塊，那么我們需要以適當(dāng)?shù)姆椒?#xff0c;將動(dòng)態(tài)注冊(cè)模塊與動(dòng)態(tài)導(dǎo)入和懶加載模塊結(jié)合起來使用。

能夠?qū)uex模塊進(jìn)行代碼分割，動(dòng)態(tài)注冊(cè)是一種強(qiáng)大的能力。我們?cè)趹?yīng)用程序中處理的與數(shù)據(jù)相關(guān)的操作越多，就可以在bundle大小方面節(jié)省更多成本。

在本系列的下一部分中，我們將學(xué)習(xí)如何懶加載單個(gè)組件，更重要的是，應(yīng)該懶加載哪些組件。

總結(jié)

以上是生活随笔為你收集整理的vue 动态路由_Vue.js应用性能优化三的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。