摘要：靜態(tài)模塊不能被取消注冊也不能延遲注冊，并且在初始化后不能更改靜態(tài)模塊的結(jié)構(gòu)不是狀態(tài)。為此，我們將在路由對應(yīng)的組件中加載模塊，而不是在中導(dǎo)入并注冊它。能代碼分割模塊是一個強(qiáng)大的工具。

在前一部分，我們學(xué)習(xí)了足夠強(qiáng)大的模式，可以顯著提高應(yīng)用程序的性能 - 按每個路由分割代碼。雖然按路由分割代碼非常有用，但是在用戶訪問我們的站點后，仍然有很多代碼是不需要的。在本系列的這一部分中，我們將重點關(guān)注分離我們的狀態(tài)管理（state management?） - Vuex模塊。
本系列文章基于對 Vue Storefront 性能優(yōu)化過程的學(xué)習(xí)。通過使用下面的技術(shù)，我們能夠?qū)⒊跏嘉募拇笮p少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

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

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

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

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

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

假設(shè)我們的應(yīng)用程序中有一個專用的 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 路徑），但由于這些靜態(tài)模塊都是被集中注冊的，最終這些代碼都會被打包到主文件中。

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

這當(dāng)然不是我們想要的結(jié)果。我們需要一種方法只在訪問 /admin 路由時才加載。您可能已經(jīng)猜到靜態(tài)模塊不能滿足我們的需要。所有靜態(tài)模塊都需要在 Vuex Store 創(chuàng)建時進(jìn)行注冊。

這就是動態(tài)模塊可以幫助我們的地方!

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

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

// 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 創(chuàng)建之后使用 registerModule 方法注冊這個模塊。

動態(tài)注冊不需要對模塊本身進(jìn)行任何更改，因此可以靜態(tài)或動態(tài)注冊任何 Vuex 模塊。

當(dāng)然，在目前來看，這個動態(tài)注冊的模塊并沒有給我們?nèi)魏魏锰帯?/p> 適當(dāng)?shù)姆指頥uex模塊

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

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

// 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 中是靜態(tài)導(dǎo)入的。

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

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

// 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 () { 
    // 在這里動態(tài)注冊模塊
    this.$store.registerModule("admin", adminModule)
  },
  beforeDestroy () {
    // 當(dāng)組件被銷毀時，取消注冊
   this.$store.unregisterModule("admin")
  }
}

讓我們看看發(fā)生了什么!

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

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

重要提示：如果使用SSR模式，請確保在 mounted 鉤子中 注冊模塊。否則，它可能導(dǎo)致內(nèi)存泄漏，因為beforeDestroy鉤子在服務(wù)器端不能執(zhí)行。

現(xiàn)在我們知道了如何使用動態(tài)注冊 Vuex 模塊，并適當(dāng)?shù)姆峙涞教囟酚傻奈募小Ｗ屛覀兛匆幌律晕?fù)雜一點的用例。

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

為了存儲客戶評價數(shù)據(jù)，我們還需要一個Vuex模塊。我們稱它為 testimonials 吧。該模塊將負(fù)責(zé)顯示以前添加的評價和添加的新評價。我們不需要知道實現(xiàn)細(xì)節(jié)。

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

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

多虧了動態(tài)導(dǎo)入，testmonials.js 內(nèi)容被打包到一個多帶帶的文件中，只有在調(diào)用 gettestmonialsModule 方法時才下載該文件。

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

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

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

如果模塊只有在一些交互之后才需要，那么我們需要將動態(tài)模塊注冊與動態(tài)導(dǎo)入結(jié)合起來，并以適當(dāng)?shù)姆椒ㄑ舆t加載模塊。

能代碼分割Vuex模塊是一個強(qiáng)大的工具。您在應(yīng)用程序中處理的與數(shù)據(jù)相關(guān)的操作越多，就可以從文件大小方面節(jié)省的越多。

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

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