一、引入

我們?cè)谥v異步組件之前，我們?cè)賮砘仡櫼幌聎ebpack打包時(shí)的分包操作。我們可以使用import()異步加載模塊來實(shí)現(xiàn)分包操作。import函數(shù)的返回值是一個(gè)Promise，所以我們可以使用then進(jìn)行下一步處理。

如下圖所示為打包后的文件目錄，因?yàn)槲覀內(nèi)绻郊虞dmath.js文件，此時(shí)就不存在中間的文件，此時(shí)當(dāng)瀏覽器請(qǐng)求資源時(shí)，就會(huì)很慢。

二、vue中的異步組件

通過上面的webpack配置我們明白了為什么要進(jìn)行分包操作，此時(shí)我們想一個(gè)問題，如果一個(gè)網(wǎng)站的頁面在用戶第一次瀏覽器時(shí)就將全部頁面都下載了，這樣會(huì)出現(xiàn)一個(gè)問題，就是首屏加載過慢。

如果我們的項(xiàng)目過大了，對(duì)于某些組件我們想要異步加載(也就是分包處理)，此時(shí)Vue給我們提供了一個(gè)函數(shù)defineAsyncComponentdefineAsyncComponent可以傳入兩種類型的參數(shù)，第一個(gè)是函數(shù)，該函數(shù)需要返回Promise，第二個(gè)參數(shù)是一個(gè)對(duì)象類型，對(duì)異步函數(shù)進(jìn)行配置。

第一種寫法：函數(shù)寫法

打包后的文件

第二種寫法：對(duì)象寫法

如圖所示是可以實(shí)現(xiàn)分包操作，相面詳細(xì)介紹一下傳入對(duì)象中的選項(xiàng)。

loader選項(xiàng)：需要一部加載的模塊，對(duì)應(yīng)的是一個(gè)函數(shù)。

loadingComponent:加載過程中顯示的組件。

errorComponent:加載失敗時(shí)顯示的組件。

delay:給出時(shí)間，當(dāng)加載時(shí)間超過該時(shí)間，直接顯示error組件。

suspensible:定義組件是否可掛起,默認(rèn)是true。

三、異步組件和suspense

suspense是一個(gè)實(shí)驗(yàn)功能的API，其功能可變。

Suspense存在兩個(gè)插槽，一個(gè)是default, 另一個(gè)是fallback,default插槽中的內(nèi)容是當(dāng)該插槽中的組件可以顯示則展示，如果不可以展示，則顯示fallback中的內(nèi)容。

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!   

最新評(píng)論