vue3 + vite實現非同步元件和路由懶載入

天問發表於2021-11-24
VueVite非同步元件路由

在 Vue2 中，非同步元件和路由懶載入處理使用 import 就可以很輕鬆實現。但是在Vue 3.x 中非同步元件的使用與 Vue 2.x 完全不同了。本文就詳細講講vue3中非同步元件和路由懶載入的實現。

Vue3 非同步元件/路由

一、前言

1-1.三點變化：

  1. 非同步元件宣告方法的改變：Vue 3.x 新增一個輔助函式defineAsyncComponent，用來顯示宣告非同步元件
  2. 非同步元件高階宣告方法中的 component 選項更名為loader
  3. loader繫結的元件載入函式不再接收resolve和reject引數，而且必須返回一個Promise

1-2.引入輔助函式defineAsyncComponent的原因：

現在，在 Vue 3 中，由於函式元件被定義為純函式，非同步元件定義需要通過將其包裝在一個新的 defineAsyncComponent helper 中來顯式定義。

二、Vue 2.x與Vue 3.x定義比較

2-1.非同步元件/路由定義比較

  • 2-1-1.在 Vue 2.x 中，宣告一個非同步元件只需這樣：
const asyncPage = () => import('./views/home.vue')
  • 2-1-2.在 Vue 3.x 中，非同步元件的匯入需要使用輔助函式defineAsyncComponent來進行顯式宣告。如下：
<template>
  <div>
    <h1>Async Components</h1>
    <p>非同步元件測試</p>
    <child />
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
const child = defineAsyncComponent(() => import('@/components/async-component-child.vue'))

export default {
  name: 'async-components',
  components:{
    'child': child
  }
};
</script>

2-2.宣告方式比較

  • 2-2-1.Vue 2.x中非同步元件的宣告有更高階的宣告方式。如下：
const asyncPageWithOptions  = {
  component: () => import('./views/home.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}

所以，下面的非同步元件宣告：

const asyncPage = () => import('./views/home.vue')

等價於：

const asyncPageWithOptions  = {
  component: () => import('./views/home.vue')
}
  • 2-2-2.Vue 3.x中也可以這樣宣告非同步元件。只是其中的component需要改為loader。如下：
const asyncPageWithOptions  = defineAsyncComponent({
  loader: () => import('./views/home.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
})

2-3.非同步元件載入函式返回比較

  • 2-3-1.在Vue 2.x中接收resolve和reject：
// 2.x version
const oldAsyncComponent = (resolve, reject) => {
  /* ... */
}
  • 2-3-2.在Vue 3.x中始終返回Promise：
// 3.x version
const asyncComponent = defineAsyncComponent(
  () => new Promise((resolve, reject) => {
      /* ... */
  })
)

Vue 3.x的非同步元件載入函式將不再接收resolve和reject，而且必須始終返回Promise。也就是說，工廠函式接收 resolve 回撥的方式定義非同步元件在 Vue 3.x 不能使用了。

// 在 Vue 3.x 中不適用
export default {
  components: {
    asyncPage: resolve => require(['@/components/list.vue'], resolve)
  },
}

三、Vue3實踐

提示： 如果是用vite工具來構建專案，在本地開發使用import做路由懶載入，可以正常載入，但是會報警告；打包到生產環境會報錯，頁面不會正常展示，可以使用以下兩種方法來實現。

3-1.路由懶載入實現

  • 3-1-1.defineAsyncComponent方法
// router/index.js
import { defineAsyncComponent } from 'vue'
const _import = (path) => defineAsyncComponent(() => import(`../views/${path}.vue`));

const routes = [
  {
    path: '/async-component',
    name: 'asyncComponent',
    component: _import('home'),
  }
];
  • 3-1-2.import.meta.glob方法
// 1.上面的方法相當於一次性載入了 views 目錄下的所有.vue檔案，返回一個物件
const modules = import.meta.glob('../views/*/*.vue');
const modules ={
    "../views/about/index.vue": () => import("./src/views/about/index.vue")
}

// 2.動態匯入的時候直接，引用
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ...
    {
      path: 'xxxx',
      name: 'xxxxx',
      // 原來的方式，這個在開發中可行，但是生產中不行
      // component: () => import(`../views${menu.file}`),
      // 改成下面這樣
      component: modules[`../views${filename}`]
    }
    // ...          
  ],
})

3-2.非同步元件實現

<template>
  <div>
    <h1>Async Components</h1>
    <p>非同步元件測試</p>
    <child></child>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
const child = defineAsyncComponent(() => import('@/components/async-component-child.vue'))

export default {
  name: 'async-components',
  components:{
    'child': child
  }
};
</script>

四、總結

簡單來說，寫在路由配置檔案中的非同步載入就是路由懶載入的用法，而寫在元件內部的非同步載入就是非同步元件用法。

歡迎訪問：個人部落格地址

相關文章