摘要：靜態模塊不能被取消注冊也不能延遲注冊，并且在初始化后不能更改靜態模塊的結構不是狀態。為此，我們將在路由對應的組件中加載模塊，而不是在中導入并注冊它。能代碼分割模塊是一個強大的工具。

在前一部分，我們學習了足夠強大的模式，可以顯著提高應用程序的性能 - 按每個路由分割代碼。雖然按路由分割代碼非常有用，但是在用戶訪問我們的站點后，仍然有很多代碼是不需要的。在本系列的這一部分中，我們將重點關注分離我們的狀態管理（state management?） - Vuex模塊。
本系列文章基于對 Vue Storefront 性能優化過程的學習。通過使用下面的技術，我們能夠將初始文件的大小減少70%，并在眨眼間使其加載。

Part 1?—?Introduction to performance optimization and lazy loading.

Part 2?—?Lazy loading routes and vendor bundle anti-pattern.

Part 3?—?Lazy loading Vuex modules

Part 4?—?Delivering good waiting experience and lazy loading individual components?—?soon

Part 5?—?Lazy loading libs and finding smaller equivalents?—?soon

Part 6?—?Performance-friendly usage of UI libraries

Part 7?—?Making use of Service Worker cache?—?soon

Part 8?—?Prefetching

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

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

// store.js
import { userAccountModule } from "./modules/userAccount"
const store = new Vuex.Store({
  modules: {
    user: userAccountModule
  }
})

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

雖然這種限制對大多數模塊來說都不是問題，而且將所有模塊聲明在一個地方，確實有助于將所有與數據相關的內容保存在一起，但是這種方法也有一些缺點。

假設我們的應用程序中有一個專用的 Vuex 模塊的 admin 面板。

// store.js
import { userAccountModule } from "./modules/userAccount"
import { adminModule } from "./modules/admin"
const store = new Vuex.Store({
  modules: {
    user: userAccountModule, 
    admin: adminModule
  }
})

你可以想象這樣的模塊可能會非常的龐大。盡管 admin 面板可能只會被一小部分用戶使用，并且只能在特定的路由下使用（一個特殊的 /admin 路徑），但由于這些靜態模塊都是被集中注冊的，最終這些代碼都會被打包到主文件中。

我們所有的模塊都打包在一個文件中

這當然不是我們想要的結果。我們需要一種方法只在訪問 /admin 路由時才加載。您可能已經猜到靜態模塊不能滿足我們的需要。所有靜態模塊都需要在 Vuex Store 創建時進行注冊。

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

動態模塊相比靜態模塊來說，可以在 Vuex Store 創建后再進行注冊。這種簡潔的功能意味著我們不需要在應用程序初始化時下載動態模塊，而是可以將其打包在不同的代碼塊中，或者在需要時延遲加載。

首先，讓我們看看前面的 admin 模塊用動態注冊是什么樣子的：

// store.js
import { userAccountModule } from "./modules/userAccount"
import { adminModule } from "./modules/admin"
const store = new Vuex.Store({
  modules: {
    user: userAccountModule, 
  }
})
store.registerModule("admin", adminModule)

我們沒有直接將 adminModule 模塊寫在 modules 屬性中，而是在 Vuex.Store 創建之后使用 registerModule 方法注冊這個模塊。

動態注冊不需要對模塊本身進行任何更改，因此可以靜態或動態注冊任何 Vuex 模塊。

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

讓我們回到我們的問題上來，既然我們知道了如何動態注冊 admin 模塊，我們當然可以嘗試將其代碼放入 /admin 路由文件中。

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

// router.js
import VueRouter from "vue-router"
const Home = () => import("./Home.vue")
const Admin = () => import("./Admin.vue")
const routes = [
  { path: "/", component: Home },
  { path: "/admin", component: Admin }
]
export const router = new VueRouter({ routes }) 

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

讓我們修復這個問題，并將此模塊僅給訪問 /admin 路由的用戶使用，這樣其他人就不會下載冗余的代碼。

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

// store.js
import { userAccountModule } from "./modules/userAccount"
export const store = new Vuex.Store({
  modules: {
    user: userAccountModule, 
  }
})
// Admin.vue
import adminModule from "./admin.js"
export default { 
  // other component logic
  mounted () { 
    // 在這里動態注冊模塊
    this.$store.registerModule("admin", adminModule)
  },
  beforeDestroy () {
    // 當組件被銷毀時，取消注冊
   this.$store.unregisterModule("admin")
  }
}

讓我們看看發生了什么!

我們在 /admin 路由對應的 Admin.vue 組件中導入了 admin 模塊，并在組件掛載（mounted）之后注冊到了 Store 中。一旦用戶退出 damin 面板，銷毀該組件，我們就會取消注冊該模塊，以防止同一模塊被多次注冊。

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

重要提示：如果使用SSR模式，請確保在 mounted 鉤子中 注冊模塊。否則，它可能導致內存泄漏，因為beforeDestroy鉤子在服務器端不能執行。

現在我們知道了如何使用動態注冊 Vuex 模塊，并適當的分配到特定路由的文件中。讓我們看一下稍微復雜一點的用例。

假如說，我們的 home.vue 上有一個客戶評價的部分，我們希望用戶可以對我們的服務有積極的建議。這樣的評價部分有很多，我們不想在用戶進入我們的網站后立即顯示它們， 只有在用戶需要時才能顯示它們。我們可以添加“Show Testimonials”按鈕，點擊后才加載并顯示客戶評價的部分。

為了存儲客戶評價數據，我們還需要一個Vuex模塊。我們稱它為 testimonials 吧。該模塊將負責顯示以前添加的評價和添加的新評價。我們不需要知道實現細節。

我們希望只有用戶點擊按鈕才下載 testimonials 模塊，在此之前是不需要它的。讓我們看看如何利用動態模塊注冊和動態導入來實現此功能，Testimonials.vue 是被 Home.vue 使用的一個組件。

讓我們快速回顧一下代碼。當用戶單擊 "Show Testimonials" 按鈕時，將調用 getTestimonials() 方法，它負責調用 getTestimonialsModule() 來獲取 testimonials.js。一旦 promise 為成功狀態（resolved）（這意味著模塊已被加載），我們就會動態注冊它并觸發 action 獲取客戶評價。

多虧了動態導入，testmonials.js 內容被打包到一個多帶帶的文件中，只有在調用 gettestmonialsModule 方法時才下載該文件。

當我們需要退出 admin 面板時，我們在 beforeDestroy 生命周期鉤子中取消注冊已注冊過的模塊，如果我們再次進入這個路由，就不會出現重復注冊的情況。

盡管靜態 Vuex 模塊注冊對于大多數用例來說已經足夠了，但是在某些特定的情況下，我們可能需要使用動態注冊。

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

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

能代碼分割Vuex模塊是一個強大的工具。您在應用程序中處理的與數據相關的操作越多，就可以從文件大小方面節省的越多。

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

如果對你有幫助，請關注【前端技能解鎖】：