前端開發(fā)中，隨著業(yè)務(wù)和頁面增加，以組件為基本單位的結(jié)構(gòu)下，組件數(shù)量會增長極快，為了優(yōu)化我們會很顯然地想要進行一些工作：

• 代碼分塊
• 懶加載非必要資源文件

非必要資源，指的首次渲染出某頁面所不必要的資源，如因為用戶操作才出現(xiàn)的圖片、彈窗等。

代碼分塊和懶加載在頁面層面具有極大的優(yōu)化作用，用戶很可能只是瀏覽dashboard頁面，可能根本就不會去看詳情等頁面，那我們就不必將詳情頁面的代碼和dashboard頁面代碼混在一起，用戶看某個頁面時只加載那個頁面對應(yīng)的資源即可，可以較大地提升用戶體驗。本文就在Vue工程下如何在組件層面配置代碼分塊和懶加載進行講解。

本文在@vue/cli 3以上版本。

懶加載組件

一般來說，Vue中使用某組件過程大致如下：

<script>
// Home.vue
import HelloWorld from '@/components/HelloWorld.vue'
export default {
? components: {
? ? HelloWorld,
? },
}
</script>

這是我們最熟悉的方式了，我們在訪問Home.vue時，Webpack為我們保證了HelloWorld.vue一定是存在的，這是由依賴關(guān)系決定的（Home.vue依賴于HelloWorld.vue）。

這很正常對吧，但是如果HelloWorld.vue是非必要資源呢，比如需要用戶點擊一個按鈕才會出現(xiàn)的彈窗或者是默認隱藏的內(nèi)容，只當某些條件觸發(fā)時才出現(xiàn)的頁面區(qū)域呢？如果是上述情況，當我們訪問Home.vue時顯然沒必要馬上就將HelloWorld.vue請求過來，而且配置方法也及其簡單：

<template>
? <div class="home">
? ? <button @click="() => showHello = true">Hello</button>
? ? <HelloWorld v-if="showHello" />
? </div>
</template>

<script>
// Home.vue
export default {
? components: {
? ? HelloWorld: () => import('@/components/HelloWorld.vue'), ?// A
? },
? data() {
? ? return {
? ? ? showHello: false,
? ? }
? },
}
</script>

只需像A行一樣簡單處理一下即可一舉兩得：HelloWorld.vue會被打包成獨立為單獨的js文件，而且只有當我們點擊按鈕時，這個獨立的js文件才會被請求，這樣能夠減小主代碼塊的體積。

簡單分析一下：import()會返回一個組件Promise，現(xiàn)在基本上所有的打包工具都理解此語法，而且還會觸發(fā)Webpack的代碼分塊（Webpack 2之后）。

注意：Vue不會在意某個組件，直到它要被渲染出來。以上例來說，只有當我們觸發(fā)了按鈕，HelloWorld.vue才有了意義。

即使所有組件都可以配置懶加載，但是別濫用，大部分情況下只對非必要資源配置懶加載即可，像上例如果HelloWorld.vue是Home.vue中是一直存在的，那樣配置懶加載可能會適得其反，加載了Home.vue對應(yīng)的js文件后會馬上請求HelloWorld.vue對應(yīng)的js文件，如果HelloWorld.vue對應(yīng)的js文件比較小，那得到的收益可能不足以抵消一次http請求帶來的消耗。

問題與解決方案

組件懶加載雖然好處極多，但仍有缺陷，如上例點擊按鈕后需等待HelloWorld.vue對應(yīng)的js文件被請求執(zhí)行后頁面才會做出相應(yīng)變化，這就涉及到加載狀態(tài)和錯誤狀態(tài)的處理（雖然一般情況下不會有問題，因為都是些小文件，加載極快，但也有例外），所幸Vue也為我們考慮到了這些：

加載中組件

<script>
// Home.vue
import LoadingComponent from '@/components/Loading'
export default {
? components: {
? ? HelloWorld: () => ({
? ? ? component: import('@/components/HelloWorld.vue'),
? ? ? loading: LoadingComponent, ?// 加載HelloWorld.vue對應(yīng)js文件中展示
? ? ? delay: 300, ? ? ? ? ? ? ? ? // loading的延遲生效時間
? ? }),
? },
? data() {
? ? return {
? ? ? showHello: false,
? ? }
? },
}
</script>

從用戶體驗方面來說，般來說500ms內(nèi)的響應(yīng)時間還不至于失去用戶的注意力，所以可以為loading配置一個延遲時間，默認200ms內(nèi)加載完成不會出現(xiàn)loading，當然也可以像上面一樣手動設(shè)置一下delay，單位ms。

錯誤處理組件

<script>
// Home.vue
import ErrorComponent from '@/components/Error'
export default {
? components: {
? ? HelloWorld: () => ({
? ? ? component: import('@/components/HelloWorld.vue'),
? ? ? error: ErrorComponent, ?// 加載HelloWorld.vue對應(yīng)js文件失敗時展示，如文件不存在
? ? ? timeout: 2000, ? ? ? ? ?// 文件加載的超時時間，超出時間未加載完成，會觸發(fā)ErrorComponent
? ? }),
? },
? data() {
? ? return {
? ? ? showHello: false,
? ? }
? },
}
</script>

出現(xiàn)錯誤的情形主要有以下幾點：

• 網(wǎng)絡(luò)連接不通 / 服務(wù)器錯誤
• 文件不存在（特別注意重新部署后之前版本的文件被刪除，而用戶還未刷新頁面）
• 加載超時（默認是沒有超時時間的，不過可以像上面一樣通過timeout屬性配置，單位ms）

preload 和 prefetch

Vue還為資源文件配置了預(yù)加載策略，即使用<link rel="prefetch">和<link rel="preload">策略，在build后的index.html文件中或者開發(fā)模式下瀏覽器的Network面板里可以具體查看。關(guān)于兩者的具體用法這里就不贅述了，這里說一下兩者差異之處：preload的優(yōu)先級比prefetch的高，一般來說當前頁面的必要資源可以使用preload策略，當前頁面的非必要資源和其他頁面的資源使用prefetch策略。

通過配置資源預(yù)加載，瀏覽器為我們預(yù)先預(yù)先加載資源，在用戶用到某些資源時可以及時響應(yīng)，可以在提升首次加載性能的同時為用戶后續(xù)的操作提供良好的體驗。

prefetch在Safari中暫時還不支持，所以懶加載在Safari中表現(xiàn)地相對較差。

總結(jié)

Vue中使用懶加載和代碼分塊對產(chǎn)品進行優(yōu)化，簡單實用，但是這其中存在著權(quán)衡，如果項目較小，打包文件并不大，則可能不需要進行代碼分塊和懶加載，畢竟http請求也是挺貴的。

當項目較大時，使用懶加載和代碼分塊就可以顯著地提升性能，但是同樣注意那需要由后來的請求彌補的，但所幸目前大部分瀏覽器都支持資源預(yù)加載策略，搭配使用效果更佳。

• 異步組件
• preload
• Safari prefetch
• Safari preload

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論