Vue 中使用defineAsyncComponent 延遲加載組件

作者：張張 2021-08-01 07:58:58

開發(fā) 前端

使用 Vue 3 的 defineAsyncComponent 特性可以讓我們延遲加載組件。這意味著它們僅在需要時從服務(wù)器加載。

[[414540]]

使用 Vue 3 的 defineAsyncComponent 特性可以讓我們延遲加載組件。這意味著它們僅在需要時從服務(wù)器加載。

這是改善初始頁面加載的好方法，因?yàn)槲覀兊膽?yīng)用程序?qū)⒁暂^小的塊加載，而不必在頁面加載時加載每個組件。

在本教程中，我們將學(xué)習(xí) defineAsyncComponent 的全部內(nèi)容，并看一個例子，該例子將一個彈出窗口的加載推遲到我們的應(yīng)用程序需要的時候。

好了，讓我們開始吧。

什么是defineAsyncComponent

// SOURCE: https://v3.vuejs.org/guide/component-dynamic-async.html 
const AsyncComp = defineAsyncComponent( 
  () => 
    new Promise((resolve, reject) => { 
      resolve({ 
        template: '<div>I am async!</div>' 
      }) 
    }) 
)

defineAsyncComponent 接受一個返回Promise的工廠函數(shù)。當(dāng)我們成功地從服務(wù)器獲取組件時，這個Promise應(yīng)該會被 resolve ，如果出現(xiàn)錯誤則會被 reject 。

要使用它，我們必須從Vue中導(dǎo)入它，然后才能在腳本的其余部分中使用它。

我們也可以使用工廠函數(shù)中的 import ，輕松地從其他文件中添加Vue組件。

import { defineAsyncComponent } from "vue"  
 
// 簡單使用 
const LoginPopup = defineAsyncComponent(() => import("./components/LoginPopup.vue"))

這是使用 defineAsyncComponent 的最簡單方法，但我們也可以傳入一個完整的選項(xiàng)對象，配置幾個更高級的參數(shù)。

// with options  
const AsyncPopup = defineAsyncComponent({  
  loader: () => import("./LoginPopup.vue"), 
  loadingComponent: LoadingComponent, /* 在加載時顯示 */ 
  errorComponent: ErrorComponent, /* 顯示是否有錯誤 */ 
  delay: 1000, /* 在顯示加載組件之前延遲毫秒 */ 
  timeout: 3000 /* 這個毫秒之后的超時 */ 
})

就我個人而言，我發(fā)現(xiàn)自己更經(jīng)常使用第一種較短的語法，它對我的大多數(shù)使用情況都有效，但這完全取決于你。

就這么簡單，讓我們進(jìn)入我們的例子。

使用defineAsyncComponent延遲加載彈出組件

在本例中，我們將使用一個由單擊按鈕觸發(fā)的登錄彈出窗口。

每當(dāng)我們的應(yīng)用程序加載時，我們不需要我們的應(yīng)用程序加載此組件，因?yàn)橹挥性谟脩魣?zhí)行特定操作時才需要它。

所以這就是我們的登錄組件的樣子，它只是通過用 position: fixed 將屏幕的其余部分涂黑來創(chuàng)建一個彈出窗口，并且有一些輸入和一個提交按鈕。

<template> 
   <div class="popup"> 
       <div class="content"> 
           <h4> Login to your account </h4> 
           <input type="text" placeholder="Email" /> 
           <input type="password" placeholder="Password" /> 
           <button> Log in </button> 
       </div> 
   </div> 
</template> 
 
<script> 
</script> 
 
<style scoped> 
.popup { 
    position: fixed; 
    width: 100%; 
    top: ;  
    left: ; 
    height: 100%; 
    background-color: rgba(, , , 0.2); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
.content { 
   min-width: 200px; 
   width: 30%; 
   background: #fff; 
   height: 200px; 
   padding: 10px; 
   border-radius: 5px; 
} 
input[type="text"], input[type="password"] { 
    border: ; 
    outline: ; 
    border-bottom: 1px solid #eee; 
    width: 80%; 
    margin:  auto; 
    font-size: 0.5em; 
} 
button { 
   border: ; 
   margin-top: 50px; 
   background-color:#8e44ad; 
   color: #fff; 
   padding: 5px 10px; 
   font-size: 0.5em; 
} 
</style>

而不是像我們通常那樣導(dǎo)入它并將其納入我們的 components 選項(xiàng)中。

<!-- "Standard" way of doing things --> 
<template> 
  <button @click="show = true"> Login </button> 
  <login-popup v-if="show" /> 
</template> 
 
<script> 
import LoginPopup from './components/LoginPopup.vue' 
export default { 
  components: { LoginPopup }, 
  data() { 
    return { 
      show: false 
    } 
  } 
} 
</script>

我們可以改為使用 defineAsyncComponent 僅在需要時加載它(意味著單擊按鈕并切換我們的 v-if)

<!-- Use defineAsyncComponent  --> 
<template> 
  <button @click="show = true"> Login </button> 
  <login-popup v-if="show" /> 
</template> 
 
<script> 
import { defineAsyncComponent } from 'vue' 
export default { 
  components: {  
    "LoginPopup" : defineAsyncComponent(() => import('./components/LoginPopup.vue')) 
  }, 
  data() { 
    return { 
      show: false 
    } 
  } 
} 
</script>

雖然這在我們使用我們的應(yīng)用程序時可能看起來是一樣的，但讓我們檢查元素 > 網(wǎng)絡(luò)來理解這個小而重要的區(qū)別。

如果我們不使用 defineAsyncComponent，一旦我們的頁面加載，我們就會看到我們的應(yīng)用程序從服務(wù)器上獲得LoginPopup.vue。雖然在這個例子中，這可能不是最大的性能問題，但它仍然會減慢加載速度，如果我們有幾十個組件這樣做，它真的會加起來。

但是，如果我們使用 defineAsyncComponent 查看同一個選項(xiàng)卡，我們會注意到當(dāng)我們的頁面加載時，LoginPopup.vue 不見了，這是因?yàn)樗€沒有加載。

但是一旦我們點(diǎn)擊我們的按鈕并告訴我們的應(yīng)用程序顯示我們的彈出窗口，這時它就會從服務(wù)器加載，我們可以在網(wǎng)絡(luò)標(biāo)簽中看到它。

這有助于我們實(shí)現(xiàn)最佳性能。我們只想在我們的頁面初始加載時加載需要的組件。有條件渲染的組件在我們的頁面加載時往往是不需要的，所以為什么要讓我們的應(yīng)用程序加載它們呢?

如何使用異步設(shè)置功能

無論我們是否使用 defineAsyncComponent 延遲加載，任何具有異步設(shè)置功能的組件都必須用包裝。

簡而言之，創(chuàng)建一個異步設(shè)置函數(shù)是我們的一個選擇，可以讓我們的組件在渲染前等待一些API調(diào)用或其他異步動作。

這是我們具有異步設(shè)置的組件。它使用 setTimeout() 模擬 API 調(diào)用。

<template> 
   <div class="popup"> 
       <div class="content"> 
            <p> Loaded API: {{ article }} </p> 
           <h4> Login to your account </h4> 
           <input type="text" placeholder="Email" /> 
           <input type="password" placeholder="Password" /> 
           <button> Log in </button> 
       </div> 
   </div> 
</template> 
 
<script> 
const getArticleInfo = async () => { 
     // wait 3 seconds to mimic API call 
    await new Promise(resolve => setTimeout(resolve, 1000)); 
    const article = { 
        title: 'My Vue 3 Article', 
        author: 'Matt Maribojoc' 
    } 
    return article 
} 
export default { 
    async setup() { 
        const article = await getArticleInfo() 
        console.log(article) 
        return { 
            article 
        } 
    } 
} 
</script>

我們可以在有或沒有 defineAsyncComponent 的情況下將它導(dǎo)入到我們的組件中

import LoginPopup from './components/LoginPopup.vue' 
// OR  
const LoginPopup = defineAsyncComponent(() => import("./components/LoginPopup.vue"))

但是如果我們想讓它在我們的模板中渲染，我們需要將它包裝在一個 Suspense 元素中。這將等待我們的 setup 函數(shù)在嘗試渲染我們的組件之前解析。

<template> 
  <button @click="show = true"> Login </button> 
  <Suspense v-if="show"> 
    <template #default> 
      <login-popup  /> 
    </template> 
    <template #fallback> 
      <p> Loading... </p> 
    </template> 
  </Suspense> 
</template>