[[400030]]

懶加載組件是一種改善應(yīng)用程序用戶體驗(yàn)的簡(jiǎn)便方法，尤其是在我們的代碼包很大或用戶連接速度較慢的情況下。

Vue3引入了一些新功能，可通過(guò)改進(jìn)異步組件API和新的Suspense組件來(lái)幫助我們實(shí)現(xiàn)友好的用戶體驗(yàn)。

用戶訪問(wèn)應(yīng)用程序時(shí)，無(wú)需立即加載UI的某些部分，例如，諸如模態(tài)框和工具提示之類的動(dòng)態(tài)UI功能。此外，如果我們使用的是單頁(yè)面應(yīng)用程序體系結(jié)構(gòu)，則頁(yè)面上的內(nèi)容 看不見的頁(yè)面也不應(yīng)加載，直到需要為止。

示例

在此示例應(yīng)用程序中，我們的應(yīng)用程序顯示一個(gè)ChatWindow組件，如果用戶經(jīng)過(guò)身份驗(yàn)證，該組件將加載。

我們假設(shè)只能在運(yùn)行時(shí)確定身份驗(yàn)證，并且該組件很大。由于這些原因，我們需要要懶加載它。

<template> 
  <h3>Chat with friends here</h3> 
  <chat-window v-if="auth" /> 
</template> 
<script> 
import ChatWindow from "@/components/ChatWindow"; 
 
export default { 
  components: { 
    ChatWindow 
  }, 
  ... 
} 
</script> 

使用Vue3異步組件API進(jìn)行懶加載

Vue 3引入了defineAsyncComponent API，所以實(shí)現(xiàn)懶加載組件是非常簡(jiǎn)單的。

defineAsyncComponent 可以接受一個(gè)返回 Promise 的工廠函數(shù)。Promise 的 resolve 回調(diào)應(yīng)該在服務(wù)端返回組件定義后被調(diào)用。你也可以調(diào)用 reject(reason) 來(lái)表示加載失敗。

<script> 
import { defineAsyncComponent } from "vue"; 
 
const ChatWindow = defineAsyncComponent( 
  () => import("@/components/ChatWindow") 
); 
 
export default { 
  components: { 
    ChatWindow 
  }, 
  ... 
} 
</script> 

構(gòu)建后，任何動(dòng)態(tài)導(dǎo)入的組件都會(huì)作為一個(gè)單獨(dú)的文件。

File                                 Size 
 
dist/js/chunk-vendors.f11402df.js    82.39 KiB 
dist/js/app.ada103fb.js              20.59 KiB 
dist/js/ChatWindow.3c1708e4.js       5.47 KiB 
dist/css/app.8221c481.css            1.76 KiB 
dist/css/ChatWindow.f16731cd.css     2.75 KiB 

loading-state 內(nèi)容

懶加載的缺點(diǎn)是需要團(tuán)隊(duì)交流，多次請(qǐng)求造成渲染參差不齊。處理此問(wèn)題的一種方法加載組件時(shí)顯示 loading-state組件。

如下圖所示，組件在加載時(shí)，我們顯示一個(gè) loading 畫面，加載后在顯示加載的組件內(nèi)容。

defineAsyncComponent 可以接受一個(gè)對(duì)象：其中有個(gè) loadingComponent 屬性，表示加載異步組件時(shí)要使用的組件。

與 Suspense 一起使用

上面使用loading-state的方法效果是挺好的，但有一點(diǎn)限制。例如，我們可能希望將prop傳遞到加載狀態(tài)組件，將內(nèi)容傳遞到其插槽等，而使用異步組件API則不容易實(shí)現(xiàn)。

為了增加靈活性，我們可以使用Vue3中新出Suspense組件。這使我們能夠使用插槽確定模板級(jí)別的異步加載內(nèi)容。

Suspense 是全局組件(例如transition)，可以在Vue 3應(yīng)用程序中的任何位置使用。要使用它，需要在模板中聲明它，并包括兩個(gè)命名的插槽：default和fallback。

Suspense 會(huì)確保在加載異步內(nèi)容時(shí)顯示默認(rèn)插槽，并將fallback 插槽用作加載狀態(tài)。

<template> 
  <Suspense> 
    <template #default> 
      <h3>Chat with friends here</h3> 
      <chat-window /> 
    </template> 
    <template #fallback> 
      <spinner color="blue" /> 
    </template> 
  </Suspense> 
</template> 
<script> 
import { defineAsyncComponent } from "vue"; 
import Spinner from "@/components/Spinner.vue"; 
 
const ChatWindow = defineAsyncComponent( 
  () => import("@/components/ChatWindow") 
); 
 
export default { 
  components: { 
    ChatWindow, 
    Spinner 
  }, 
  ... 
} 
</script> 

異步組件在默認(rèn)情況下是可掛起的。這意味著如果它在父鏈中有一個(gè) ，它將被視為該 的異步依賴。在這種情況下，加載狀態(tài)將由 控制，組件自身的加載、錯(cuò)誤、延遲和超時(shí)選項(xiàng)都將被忽略。

異步組件可以選擇退出 Suspense 控制，并可以在其選項(xiàng)中指定 suspensible:false，讓組件始終控制自己的加載狀態(tài)。

你可以在 API 參考查看更多可用的選項(xiàng)。

~完，我是小智，去SPA了，下期見!

作者：Matt Maribojoc 譯者：前端小智 來(lái)源：stackabuse

原文：https://vuejsdevers.com/2020/07/13/vue-async-components-suspense/

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。