Vue Lazy Loading

簡介

  • 在 SPA 模式中，隨著專案規模變大，JS 檔案的加載時間也隨之變長
  • 使用懶加載可以分割程式碼，需要時再載入，減少首次進入頁面加載時間
  • 依靠於打包工具(Vite, Webpack) 代碼分割（Code Splitting）的功能
  • 目的都是為了優化使用者體驗

路由懶加載

  • 將每個路由頁面（Vue 檔案）分割成不同的塊（chunks），在訪問相應路由時才加載

不使用懶加載

  • 所有頁面會在應用載入時一次性加載
import Home from './components/Home.vue'import About from './components/About.vue'import Contact from './components/Contact.vue'const routes = [  { path: '/', component: Home },  { path: '/about', component: About },  { path: '/contact', component: Contact }]

使用懶加載

  • 當進入該路由時，再加載對應檔案
const Home = () => import('./components/Home.vue')const About = () => import('./components/About.vue')const Contact = () => import('./components/Contact.vue')const routes = [  { path: '/', component: Home },  { path: '/about', component: About },  { path: '/contact', component: Contact }]

元件懶加載

  • 當有用到該元件的需求時，再進行載入，減少首次進入頁面加載時間

不使用懶加載

  • 會在首次進入頁面時，一次性全部加載元件

創建MyComponent.vue元件

// MyComponent.vue<template>  <div>    <!-- MyComponent的內容 -->  </div></template><script>export default {  // MyComponent的邏輯}</script>

在父元件中引入

// App.vue<template>  <div>    <MyComponent />  </div></template><script>import MyComponent from './components/MyComponent.vue'export default {  components: {    MyComponent  }}</script>

使用懶加載

  • 在父元件中，使用動態引入，在使用到該元件時才會被加載
<template>  <div>    <MyComponent v-if="isComponentVisible" />  </div></template><script>export default {  data() {    return {      isComponentVisible: false    }  },  mounted() {    // 假設某些條件或事件觸發顯示    setTimeout(() => {      this.isComponentVisible = true    }, 3000)  },  components: {    MyComponent: () => import('./components/MyComponent.vue')  }}</script>

defineAsyncComponent

  • 在 Vue3 當中新增的 API，用於更簡便處理異步元件的 Lazy Loading
  1. 創建異步元件
// AsyncComponent.vue<template>  <div>    <h2>      {{ title }}    </h2>  </div></template><script setup>import { ref } from 'vue'  // 異步元件的邏輯  const title = ref('大家好')  ......</script>
  1. 在父元件中引入
// App.vue<template>  <AsyncComponent v-if="show" />  <button @click="show = true">Show Component</button></template><script setup>import { ref } from 'vue'import { defineAsyncComponent } from 'vue'const show = ref(false)const AsyncComponent = defineAsyncComponent(() => import('./components/AsyncComponent.vue'))</script>
  • 使用defineAsyncComponent時可以自定義一些設定
const AsyncComponent = defineAsyncComponent({  // the loader function  loader: () => import('./components/AsyncComponent.vue'),  // A component to use while the async component is loading  loadingComponent: LoadingComponent,  // Delay before showing the loading component. Default: 200ms.  delay: 200,  // A component to use if the load fails  errorComponent: ErrorComponent,  // The error component will be displayed if a timeout is  // provided and exceeded. Default: Infinity.  timeout: 3000})
  • 可以和Suspense一起使用
  • 加載過程中會顯示＃fallback的 Loading...，優先於defineAsyncComponent的設定
<template>  <Suspense v-if="show">    <template #default>      <AsyncComponent />    </template>    <template #fallback> Loading... </template>  </Suspense>  <button @click="show = true">Show Component</button></template>

Webpack 的 Lazy Loading

  • 允許開發者使用特定的語法（如 import()）來標記代碼中的分割點
  • 這些分割點告訴 Webpack 在這裡需要將代碼分割成不同的chunks
  • 這些chunks可以被單獨加載
  • 在開發階段和生產階段都會進行完整的應用打包

例如：在 Vue Router 中新增一個路由

  • 會將 Home.vue 及其依賴的代碼打包成一個獨立的chunk
  • 這個chunk在用戶訪問相應路由時才會被加載
const Home = () => import('./Home.vue')

參考資料

# Vue # LazyLoading