摘要：我的目標是使本系列成為關于應用程序性能的完整指南。代碼分割就是將應用程序分割成這些延遲加載的塊。總結延遲加載是提高應用程序性能并減少其大小的最佳方法之一。在本系列的下一部分中，我將向您展示如何使用和路由來分割應用程序代碼。

當“移動優先”（mobile-first）的方式逐漸成為一種標準，而不確定的網絡環境因素應該始終是我們考慮的一點，因此保持讓應用程序快速加載變得越來越困難。在本系列文章中，我將深入研究Vue性能優化技術，我們在 Vue Storefront 中已經使用了這些技術，您也可以在Vue.js應用程序中使用這些技術，使它們能夠立即加載并順利運行。我的目標是使本系列成為關于Vue應用程序性能的完整指南。

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

本系列的大部分技巧將集中于使我們的JS包更小。要理解這一點，首先我們需要理解 Webpack 是如何打包（bundling）我們所有的文件的。當打包我們的資源時，Webpack 創建了被成為依賴圖（dependency graph）的東西，它是一個基于入口，鏈接我們所有文件的圖。假設我們在webpack配置中指定了一個名為 main.js 的文件作為入口點，它將是依賴關系圖的根。現在，我們將在此文件中導入的每個js模塊將成為圖中的節點，并且在此節點中導入的每個模塊都將成為其節點。Webpack 正是使用這個依賴關系圖來檢測輸出的包中應該包含哪些文件。輸出包只是一個包含依賴關系圖中所有模塊的 Javascript 文件（或后面的部分將看到多個）。

我們可以圖解這個過程，像這樣：

現在，當我們知道打包是如何工作的，很明顯我們的項目越多，初始的 javascript 包體積會變的越大。包太大，下載和解析的時間就會越長，用戶過很長時間才能看到有意義的東西。用戶等待的時間越長，他/她就越有可能離開我們的網站。

簡而言之，更大的bundle = 更少的用戶。至少在大多數情況下是這樣。

因此，當我們仍然需要添加新特性和改進應用程序時，我們如何能夠減少包的大小？答案很容易-延遲加載和代碼分割。

顧名思義，延遲加載就是延遲加載應用程序的某些部分。換句話說，只有在我們真正需要的時候才加載它們。代碼分割就是將應用程序分割成這些延遲加載的塊。

在大多數情況下，您不需要在用戶訪問您的網站后立即從Javascript文件中獲得所有代碼。即使我們的應用程序中會有3個不同的路由，不管用戶最終會在哪個路由上，他/她總是需要下載、解析和執行文件中三個路由的代碼，即便是只需要訪問一個路由。多么浪費時間和精力！

延遲加載允許我們分割包（split the bundle），并只提供所需要的部分，這樣用戶就不會浪費時間下載和解析不被使用的代碼。

要查看我們的網站實際使用了多少JavaScript代碼，我們可以到開發者工具 -> cmd+shift+p -> type coverage -> 點擊 "record"。現在我們應該能夠看到實際使用了多少下載的代碼。

所有標記為紅色的東西都是當前路由上不需要的，可以延遲加載。如果您正在使用源碼映射（source maps ），您可以單擊此列表中的任何文件，查看它的哪些部分沒有被調用。我們可以看到，即使是 vuejs.org 也有很大的改進空間。

通過延遲加載適當的組件和庫，我們設法將 Vue Storefront 的文件大小減少了60％！

好了，我們知道什么是延遲加載，它非常有用。

現在來看看如何在Vue.js應用程序中使用它。

我們可以輕松地用 webpack dynamic imports 加載應用程序的某些部分。讓我們看看它們是如何工作的，以及它們與常規導入有何不同。

如果我們將以這樣的標準方式導入JS模塊：

// main.js
import ModuleA from "./module_a.js"
ModuleA.doStuff()

它將作為 main.js 的一個節點添加到依賴關系圖中，并與之打包在一起。

但是，如果我們僅在某些情況下需要 ModuleA，例如對用戶交互的響應，那該怎么辦呢？將這個模塊與初始文件打包在一起不是一個好主意，因為可能根本不需要它。我們需要一種方法來告訴應用程序何時應該下載這段代碼。

這就是動態導入可以幫助我們的地方!現在看看這個例子：

//main.js
const getModuleA = () => import("./module_a.js")
// 作為對某些用戶交互的響應調用
getModuleA()
  .then({ doStuff } => doStuff())

讓我們快速看看這里發生了什么：

我們沒有直接導入 module_a.js，而是創建了一個返回 import() 函數的函數。現在webpack將動態導入模塊的內容打包到一個多帶帶的文件中，除非函數被調用，否則不會導入也不會下載文件。在稍后的代碼中，我們下載了這段可選代碼，作為對某些特定用戶交互的響應(如路由更改或單擊)。

通過動態導入，我們基本上隔離了將添加到依賴關系圖中的給定節點(在本例中是 module_a)，并在確定需要時下載這一部分(這意味著我們還切斷了在module_a.js中導入的模塊)。

讓我們看另一個例子，它將更好地說明這種機制。

假設我們有4個文件: main.js, module_a.js、module_b.js 和 module_c.js。要了解動態導入的工作原理，我們只需要 main 和 module_a 的源代碼:

//main.js
import ModuleB from "./mobile_b.js"
const getModuleA = () => import("./module_a.js")
getModuleA()
  .then({ doStuff } => doStuff()
)
//module_a.js
import ModuleC from "./module_c.js"

通過使 module_a 成為一個動態導入的模塊，我們把 module_a 及其所有的子模塊從依賴圖切割成一部分。當 module_a 被動態導入時，它與其中導入的模塊一起加載。換句話說，我們只是為依賴關系圖創建了一個新的入口點。

這就是我們的依賴關系圖和文件包在給定設置下的樣子。

我們知道什么是延遲加載，以及為什么需要它。現在看看如何在Vue應用程序中使用它。

好消息是它非常簡單，我們可以延遲加載整個SFC（譯者注：Vue Single-File Component -- 單文件組件）以及它的css和html，語法與之前一模一樣！

const lazyComponent = () => import("Component.vue")

這就是你所需要的！ 現在只有在請求時才會下載組件。 以下是調用Vue組件動態加載的最常用方法：

調用帶有導入的函數

const lazyComponent = () => import("Component.vue")
lazyComponent()

組件請求后渲染

請注意，只有當組件被請求要在模板中渲染時，才會調用 lazyComponent 函數。
例如下面的代碼：

這樣不會動態導入組件，因為它并沒有添加到DOM中(但是當值變為true時就會動態導入，這是一種延遲加載Vue組件的好方法)。

延遲加載是提高web應用程序性能并減少其大小的最佳方法之一。我們學習了如何使用Vue組件的延遲加載。在本系列的下一部分中，我將向您展示如何使用 Vue-router 和 async 路由來分割Vue應用程序代碼。

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