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

本篇內容介紹了“vue組件代碼分塊和懶加載是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

前端開發中，隨著業務和頁面增加，以組件為基本單位的結構下，組件數量會增長極快，為了優化我們會很顯然地想要進行一些工作：

• 代碼分塊

• 懶加載非必要資源文件

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

代碼分塊和懶加載在頁面層面具有極大的優化作用，用戶很可能只是瀏覽dashboard頁面，可能根本就不會去看詳情等頁面，那我們就不必將詳情頁面的代碼和dashboard頁面代碼混在一起，用戶看某個頁面時只加載那個頁面對應的資源即可，可以較大地提升用戶體驗。

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

懶加載組件

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

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

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

這很正常對吧，但是如果HelloWorld.vue是非必要資源呢，比如需要用戶點擊一個按鈕才會出現的彈窗或者是默認隱藏的內容，只當某些條件觸發時才出現的頁面區域呢？如果是上述情況，當我們訪問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，現在基本上所有的打包工具都理解此語法，而且還會觸發Webpack的代碼分塊（Webpack 2之后）。

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

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

問題與解決方案

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

加載中組件

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

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

錯誤處理組件

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

出現錯誤的情形主要有以下幾點：

• 網絡連接不通 / 服務器錯誤

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

• 加載超時（默認是沒有超時時間的，不過可以像上面一樣通過timeout屬性配置，單位ms）

preload 和 prefetch

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

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

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

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