vue組件代碼分塊和懶加載是什么

本篇內(nèi)容介紹了“vue組件代碼分塊和懶加載是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

• 代碼分塊

• 懶加載非必要資源文件

非必要資源，指的首次渲染出某頁(yè)面所不必要的資源，如因?yàn)橛脩舨僮鞑懦霈F(xiàn)的圖片、彈窗等。

代碼分塊和懶加載在頁(yè)面層面具有極大的優(yōu)化作用，用戶很可能只是瀏覽dashboard頁(yè)面，可能根本就不會(huì)去看詳情等頁(yè)面，那我們就不必將詳情頁(yè)面的代碼和dashboard頁(yè)面代碼混在一起，用戶看某個(gè)頁(yè)面時(shí)只加載那個(gè)頁(yè)面對(duì)應(yīng)的資源即可，可以較大地提升用戶體驗(yà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問(wèn)Home.vue時(shí)，Webpack為我們保證了HelloWorld.vue一定是存在的，這是由依賴關(guān)系決定的（Home.vue依賴于HelloWorld.vue）。

這很正常對(duì)吧，但是如果HelloWorld.vue是非必要資源呢，比如需要用戶點(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í)顯然沒必要馬上就將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>

從用戶體驗(yàn)方面來(lái)說(shuō)，般來(lái)說(shuō)500ms內(nèi)的響應(yīng)時(shí)間還不至于失去用戶的注意力，所以可以為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ò)誤

• 文件不存在（特別注意重新部署后之前版本的文件被刪除，而用戶還未刷新頁(yè)面）

• 加載超時(shí)（默認(rèn)是沒有超時(shí)時(shí)間的，不過(guò)可以像上面一樣通過(guò)timeout屬性配置，單位ms）

preload 和 prefetch

Vue還為資源文件配置了預(yù)加載策略，即使用<link rel="prefetch">和<link rel="preload">策略，在build后的index.html文件中或者開發(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ù)先加載資源，在用戶用到某些資源時(shí)可以及時(shí)響應(yīng)，可以在提升首次加載性能的同時(shí)為用戶后續(xù)的操作提供良好的體驗(yàn)。

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

“vue組件代碼分塊和懶加載是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！