在上一篇Vue.js應用性能優化二中，我們學習了足夠強大的模式，可以顯著提高應用程序的性能 - 按照路由分割代碼。雖然按照路由拆分代碼非常有用，但在用戶訪問我們的站點后，仍然有很多內部代碼不需要。在本系列的這一部分中，我們將重點關注代碼拆分我們的狀態管理 - Vuex模塊。

---

系列文章：

Vue.js應用性能優化一

Vue.js應用性能優化二

構建Vue.js組件的10個技巧

如何使用Vue.js渲染JSON中定義的動態組件

Vuejs代碼實踐上篇

Vuejs代碼實踐中篇

---

兩種類型的Vuex模塊

在我們進一步了解如何懶加載Vuex模塊之前，您需要注意一件重要的事情。您需要了解注冊Vuex模塊的方法有哪些，以及它們的優缺點。

靜態Vuex模塊在Store初始化期間聲明。以下是顯式創建的靜態模塊的示例：

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

雖然這種限制對于大多數模塊來說都不是問題，并且在一個地方聲明，那么所有與數據相關的東西都可以保存在一個地方。但這種方法存在一些缺點。

假設我們的應用程序中有一個Admin Dashboard，它關聯一個專用Vuex模塊adminModule。

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

這當然不是我們想要的結果。我們需要一種方法只在/admin路由中加載這個模塊。您可能已經猜到靜態模塊無法滿足我們的需求。所有靜態模塊都需要在創建Vuex Store時注冊，因此以后無法注冊。

這是動態模塊可以幫助我們的地方！

在創建Vuex Store后，可以注冊與靜態模塊相反的動態模塊。這個簡潔的功能意味著我們不需要在應用程序初始化時下載動態模塊，并且可以將其打包在不同的代碼塊中，或者在需要時懶加載。

首先讓我們看一下以前的代碼使用動態注冊管理模塊之后的樣子。

不是將adminModule對象直接傳遞到我們store的modules屬性，而是在創建Store之后，使用registerModule方法注冊它。

動態注冊不需要在模塊內部進行任何更改，因此可以靜態或動態地注冊任何Vuex模塊。

當然，在目前的形式下，這個動態注冊的模塊并沒有給我們任何好處。

適當的代碼分割Vuex模塊

現在我們知道如何動態注冊管理模塊，我們當然可以嘗試將它的代碼放入/admin route bundle。

讓我們暫時停下來，簡要了解我們正在使用的應用程序。

在router.js中，我們有兩個懶加載的代碼分割路由。使用我們上面看到的代碼，我們的admin Vuex模塊仍然在主app.js包中，因為它是store.js中的靜態導入。

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

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

我們來看看發生了什么！

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

現在因為admin模塊是在Admin.vue而不是store.js中導入的，所以它將與代碼分割的Admin.vue打包在一起！

重要說明：如果您正在使用SSR模式，請確保在mounted鉤子中注冊模塊。否則它可能導致內存泄漏，因為在服務器端沒有beforeDestroy鉤子。

現在我們知道如何動態注冊Vuex模塊，并將路由模塊分發到適當的包中。下邊讓我們來看看稍微復雜一些的用例。

延遲加載Vuex模塊

假設我們在Home.vue上有推薦部分，我們希望展示一些用戶推薦評語。但是我們不想在用戶進入我們的網站后立即顯示它們。只有在用戶需要時才能顯示它們。我們可以添加“顯示推薦”按鈕，點擊后會加載并顯示其下方的推薦。

要存儲推薦數據，我們還需要一個Vuex模塊。我們稱之為推薦模塊。該模塊將負責顯示以前添加的推薦和添加新推薦。我們不需要了解實現細節。

我們希望只有用戶點擊按鈕才去請求下載推薦模塊代碼，因為之前不需要它。讓我們看看如何利用動態模塊注冊和動態導入來實現此功能。 Testimonials.vue是Home.vue中的一個組件。

當用戶單擊Show Testimonials按鈕時，將調用getTestimonials()方法。它負責調用getTestimonialsModule()來獲取testimonials.js。一旦promise resovled(這意味著加載了模塊)，我們就會動態注冊它并調度負責獲取推薦的動作action。

由于動態導入，testimonials.js內容被打包到一個單獨的文件中，只有在調用getTestimonialsModule方法時才會下載該文件。

當我們需要退出管理面板時，在beforeDestroy生命周期鉤子中取消注冊模塊，這樣如果我們再次進入，就不會重復注冊模塊。

總結

即使靜態Vuex模塊注冊對于大多數用例來說已足夠，但在某些情況下我們可能希望使用動態注冊。

如果只在特定路由上需要模塊，那么我們可以在適當的路由組件中動態注冊它，這樣它就不會在主bundle中存在。

如果只是在一些交互之后才需要模塊，那么我們需要以適當的方法，將動態注冊模塊與動態導入和懶加載模塊結合起來使用。

能夠對Vuex模塊進行代碼分割，動態注冊是一種強大的能力。我們在應用程序中處理的與數據相關的操作越多，就可以在bundle大小方面節省更多成本。

在本系列的下一部分中，我們將學習如何懶加載單個組件，更重要的是，應該懶加載哪些組件。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。