您好,登錄后才能下訂單哦!
vue.js 組件
組件(Component)是 Vue.js 最強(qiáng)大的功能之一。
組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼。
在大型單頁面應(yīng)用中,處于對性能的考慮和首屏加載速度的要求,我們一般都會使用webpack的代碼分割和vue-router的路由懶加載功能將我們的代碼分成一個個模塊,并且只在需要的時候才從服務(wù)器加載一個模塊。
但是這種解決方案也有其問題,當(dāng)網(wǎng)絡(luò)環(huán)境較差時,我們?nèi)ナ状卧L問某個路由模塊,由于加載該模塊的資源需要一定的時間,那么該段時間內(nèi),我們的應(yīng)用就會處于無響應(yīng)的狀態(tài),用戶體驗極差。
解決方案
這種情況,我們一方面可以縮小路由模塊代碼的體積,靜態(tài)資源使用cdn存儲等方式縮短加載時間,另一方面則可以路由組件上使用異步組件,顯示loading和error等狀態(tài),使用戶能夠得到清晰明了的操作反饋。
Vue官方文檔-動態(tài)組件&異步組件
具體實現(xiàn)
聲明方法,基于Vue動態(tài)組件工廠函數(shù)來返回一個Promise對象
/** * 處理路由頁面切換時,異步組件加載過渡的處理函數(shù) * @param {Object} AsyncView 需要加載的組件,如 import('@/components/home/Home.vue') * @return {Object} 返回一個promise對象 */ function lazyLoadView (AsyncView) { const AsyncHandler = () => ({ // 需要加載的組件 (應(yīng)該是一個 `Promise` 對象) component: AsyncView, // 異步組件加載時使用的組件 loading: require('@/components/public/RouteLoading.vue').default, // 加載失敗時使用的組件 error: require('@/components/public/RouteError.vue').default, // 展示加載時組件的延時時間。默認(rèn)值是 200 (毫秒) delay: 200, // 如果提供了超時時間且組件加載也超時了, // 則使用加載失敗時使用的組件。默認(rèn)值是:`Infinity` timeout: 10000 }); return Promise.resolve({ functional: true, render (h, { data, children }) { return h(AsyncHandler, data, children); } }); }
引入路由
const helloWorld = () => lazyLoadView(import('@/components/helloWorld')) vue-router中使用 routes: [ { path: '/helloWorld', name: 'helloWorld', component: helloWorld } ]
至此,改造已經(jīng)完成,當(dāng)你首次加載某一個組件的資源時(可以將網(wǎng)速調(diào)為 slow 3g,效果更明顯),就會顯示你在loading組件的內(nèi)容,而當(dāng)超出超時時間仍未加載完成該組件時,那么將顯示error組件的內(nèi)容(建議error組件盡量簡單,因為當(dāng)處于低速網(wǎng)絡(luò)或者斷網(wǎng)情況下時,error組件內(nèi)的圖片資源等有可能出現(xiàn)無法加載的問題)
總結(jié)
以上所述是小編給大家介紹的Vue異步組件處理路由組件加載狀態(tài)的解決方案,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。