摘要：我的目標(biāo)是使本系列成為關(guān)于應(yīng)用程序性能的完整指南。代碼分割就是將應(yīng)用程序分割成這些延遲加載的塊?？偨Y(jié)延遲加載是提高應(yīng)用程序性能并減少其大小的最佳方法之一。在本系列的下一部分中，我將向您展示如何使用和路由來分割應(yīng)用程序代碼。

當(dāng)“移動(dòng)優(yōu)先”（mobile-first）的方式逐漸成為一種標(biāo)準(zhǔn)，而不確定的網(wǎng)絡(luò)環(huán)境因素應(yīng)該始終是我們考慮的一點(diǎn)，因此保持讓應(yīng)用程序快速加載變得越來越困難。在本系列文章中，我將深入研究Vue性能優(yōu)化技術(shù)，我們?cè)? Vue Storefront 中已經(jīng)使用了這些技術(shù)，您也可以在Vue.js應(yīng)用程序中使用這些技術(shù)，使它們能夠立即加載并順利運(yùn)行。我的目標(biāo)是使本系列成為關(guān)于Vue應(yīng)用程序性能的完整指南。

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包更小。要理解這一點(diǎn)，首先我們需要理解 Webpack 是如何打包（bundling）我們所有的文件的。當(dāng)打包我們的資源時(shí)，Webpack 創(chuàng)建了被成為依賴圖（dependency graph）的東西，它是一個(gè)基于入口，鏈接我們所有文件的圖。假設(shè)我們?cè)趙ebpack配置中指定了一個(gè)名為 main.js 的文件作為入口點(diǎn)，它將是依賴關(guān)系圖的根?，F(xiàn)在，我們將在此文件中導(dǎo)入的每個(gè)js模塊將成為圖中的節(jié)點(diǎn)，并且在此節(jié)點(diǎn)中導(dǎo)入的每個(gè)模塊都將成為其節(jié)點(diǎn)。Webpack 正是使用這個(gè)依賴關(guān)系圖來檢測(cè)輸出的包中應(yīng)該包含哪些文件。輸出包只是一個(gè)包含依賴關(guān)系圖中所有模塊的 Javascript 文件（或后面的部分將看到多個(gè)）。

我們可以圖解這個(gè)過程，像這樣：

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

簡(jiǎn)而言之，更大的bundle = 更少的用戶。至少在大多數(shù)情況下是這樣。

因此，當(dāng)我們?nèi)匀恍枰砑有绿匦院透倪M(jìn)應(yīng)用程序時(shí)，我們?nèi)绾文軌驕p少包的大?。看鸢负苋菀?延遲加載和代碼分割。

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

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

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

要查看我們的網(wǎng)站實(shí)際使用了多少JavaScript代碼，我們可以到開發(fā)者工具 -> cmd+shift+p -> type coverage -> 點(diǎn)擊 "record"?，F(xiàn)在我們應(yīng)該能夠看到實(shí)際使用了多少下載的代碼。

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

通過延遲加載適當(dāng)?shù)慕M件和庫，我們?cè)O(shè)法將 Vue Storefront 的文件大小減少了60％！

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

現(xiàn)在來看看如何在Vue.js應(yīng)用程序中使用它。

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

如果我們將以這樣的標(biāo)準(zhǔn)方式導(dǎo)入JS模塊：

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

它將作為 main.js 的一個(gè)節(jié)點(diǎn)添加到依賴關(guān)系圖中，并與之打包在一起。

但是，如果我們僅在某些情況下需要 ModuleA，例如對(duì)用戶交互的響應(yīng)，那該怎么辦呢？將這個(gè)模塊與初始文件打包在一起不是一個(gè)好主意，因?yàn)榭赡芨静恍枰?。我們需要一種方法來告訴應(yīng)用程序何時(shí)應(yīng)該下載這段代碼。

這就是動(dòng)態(tài)導(dǎo)入可以幫助我們的地方!現(xiàn)在看看這個(gè)例子：

//main.js
const getModuleA = () => import("./module_a.js")
// 作為對(duì)某些用戶交互的響應(yīng)調(diào)用
getModuleA()
  .then({ doStuff } => doStuff())

讓我們快速看看這里發(fā)生了什么：

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

通過動(dòng)態(tài)導(dǎo)入，我們基本上隔離了將添加到依賴關(guān)系圖中的給定節(jié)點(diǎn)(在本例中是 module_a)，并在確定需要時(shí)下載這一部分(這意味著我們還切斷了在module_a.js中導(dǎo)入的模塊)。

讓我們看另一個(gè)例子，它將更好地說明這種機(jī)制。

假設(shè)我們有4個(gè)文件: main.js, module_a.js、module_b.js 和 module_c.js。要了解動(dòng)態(tài)導(dǎo)入的工作原理，我們只需要 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 成為一個(gè)動(dòng)態(tài)導(dǎo)入的模塊，我們把 module_a 及其所有的子模塊從依賴圖切割成一部分。當(dāng) module_a 被動(dòng)態(tài)導(dǎo)入時(shí)，它與其中導(dǎo)入的模塊一起加載。換句話說，我們只是為依賴關(guān)系圖創(chuàng)建了一個(gè)新的入口點(diǎn)。

這就是我們的依賴關(guān)系圖和文件包在給定設(shè)置下的樣子。

我們知道什么是延遲加載，以及為什么需要它?，F(xiàn)在看看如何在Vue應(yīng)用程序中使用它。

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

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

這就是你所需要的！ 現(xiàn)在只有在請(qǐng)求時(shí)才會(huì)下載組件。 以下是調(diào)用Vue組件動(dòng)態(tài)加載的最常用方法：

調(diào)用帶有導(dǎo)入的函數(shù)

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

組件請(qǐng)求后渲染

請(qǐng)注意，只有當(dāng)組件被請(qǐng)求要在模板中渲染時(shí)，才會(huì)調(diào)用 lazyComponent 函數(shù)。
例如下面的代碼：

這樣不會(huì)動(dòng)態(tài)導(dǎo)入組件，因?yàn)樗]有添加到DOM中(但是當(dāng)值變?yōu)閠rue時(shí)就會(huì)動(dòng)態(tài)導(dǎo)入，這是一種延遲加載Vue組件的好方法)。

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

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