快捷導(dǎo)航

vue組件代碼分塊和懶加載講解

更新時(shí)間：2022年04月11日 11:08:59 作者：劉文壯

這篇文章主要介紹了vue組件代碼分塊和懶加載講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

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

懶加載組件

一般來(lái)說(shuō)，Vue中使用某組件過(guò)程大致如下：

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

這是我們最熟悉的方式了，我們?cè)谠L(fǎng)問(wèn)Home.vue時(shí)，Webpack為我們保證了HelloWorld.vue一定是存在的，這是由依賴(lài)關(guān)系決定的（Home.vue依賴(lài)于HelloWorld.vue）。

這很正常對(duì)吧，但是如果HelloWorld.vue是非必要資源呢，比如需要用戶(hù)點(diǎn)擊一個(gè)按鈕才會(huì)出現(xiàn)的彈窗或者是默認(rèn)隱藏的內(nèi)容，只當(dāng)某些條件觸發(fā)時(shí)才出現(xiàn)的頁(yè)面區(qū)域呢？如果是上述情況，當(dāng)我們?cè)L問(wèn)Home.vue時(shí)顯然沒(méi)必要馬上就將HelloWorld.vue請(qǐng)求過(guò)來(lái)，而且配置方法也及其簡(jiǎn)單：

<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行一樣簡(jiǎn)單處理一下即可一舉兩得：HelloWorld.vue會(huì)被打包成獨(dú)立為單獨(dú)的js文件，而且只有當(dāng)我們點(diǎn)擊按鈕時(shí)，這個(gè)獨(dú)立的js文件才會(huì)被請(qǐng)求，這樣能夠減小主代碼塊的體積。

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

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

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

問(wèn)題與解決方案

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

加載中組件

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

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

錯(cuò)誤處理組件

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

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

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

preload 和 prefetch

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

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