Vue 元件太肥,切換頁面卡卡怎麼辦?讓 Suspense 登場吧!( ^ ω ^ )✧

鱈魚-avatar-img
發佈於Vue
更新於 發佈於 閱讀時間約 3 分鐘
鱈魚的魚缸搬家了!新家文章皆有重新修訂,歡迎來新家看看喔。(´▽`ʃ♡ƪ)
raw-image


醜話說在前頭,切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境喔。(☆-v-)


甚麼樣的情況會讓元件太大呢?有可能是 HTML、CSS 太多,但最常見的情況就是包了太多 JS 在一起了。╮(╯▽╰)╭(import 一大堆套件等等)


除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。

甚麼是 Async Component?簡單來說就是在真的要用的時候才從 server 下載元件,如果熟悉 Vue Router 的朋友們對以下寫法一定不陌生:

const router = createRouter({
// ...
routes: [
{
path: '/users/:id',
component: () => import('./views/UserDetails.vue')
},
],
})

這個在 Vue Router 中稱為 Lazy Loading Routes


此概念與 Async Component 概念相同,編譯、打包時會將每個頁面拆分,只有在真的需要某頁面元件時,才從 server 下載,才不會讓進入網頁的使用者等待下載一堆還不會用到的頁面。


讓我們來一個簡單的範例:

App.vue

<script setup>
import { defineAsyncComponent } from 'vue';
import FatComp from './components/FatComp.vue';

</script>

<template>
Vue Suspense

<hr />

<FatComp />
</template>

其中 FatComp 是一個和鱈魚一樣超肥的元件,會顯示「很大很大的元件」。

鱈魚:「說好的尊重呢?(゚Д゚*)ノ」


如果我們直接 import 元件,就必須等待元件下載完成,App.vue 的畫面才會出現。


可以注意到 Vue Suspense 的文字會等到 FatComp 載入完成後才會顯示。

raw-image


如果我們使用 Suspense 改寫:

<script setup>
import { defineAsyncComponent } from 'vue';

const AsyncFatComp = defineAsyncComponent(() =>
import('./components/FatComp.vue')
);
</script>

<template>
Vue Suspense

<hr />

<Suspense>
<AsyncFatComp />

<template #fallback> Loading... </template>
</Suspense>
</template>
raw-image

可以看到 Vue Suspense 字樣先出現,肥肥的元件則會等到下載完成才出現。


恭喜頁面不卡了!✧*。٩(ˊᗜˋ*)و✧*。


Suspense 元件詳細說明可以來官方文檔看看。

以上範例程式在此,我們下次再見囉!(´▽`ʃ♡ƪ)

留言
avatar-img
留言分享你的想法!
avatar-img
鱈魚的魚缸
17會員
14內容數
各種鱈魚滾鍵盤的雜紀
鱈魚的魚缸的其他內容
2024/07/25
先前提到 Quasar 的 Dialog Plugin 很好用,再讓我補充一個用法。
Thumbnail
2024/07/25
先前提到 Quasar 的 Dialog Plugin 很好用,再讓我補充一個用法。
Thumbnail
2024/07/15
Quasar Dialog 的 Invoking custom component 很好用,但是有些困擾的地方,一起來看看有甚麼辦法吧。
Thumbnail
2024/07/15
Quasar Dialog 的 Invoking custom component 很好用,但是有些困擾的地方,一起來看看有甚麼辦法吧。
Thumbnail
2024/06/30
有時候使用 Pinia 會遇到資料意外變更問題,這其實不是鳳梨的錯,讓我們看看怎麼回事吧。( ´ ▽ ` )ノ
Thumbnail
2024/06/30
有時候使用 Pinia 會遇到資料意外變更問題,這其實不是鳳梨的錯,讓我們看看怎麼回事吧。( ´ ▽ ` )ノ
Thumbnail
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。
Thumbnail
切換頁面卡卡有很多種原因,這裡舉的例子只針對元件太大的情境。 除了想辦法拆分外,還有一個方法就是利用 Vue 的 Async Component。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
如果前人已經走出一條最佳路徑,我們只顧著欣賞也會到山頂 關注點的改變 一個好的架構都會希望讓開發者能專注在”業務邏輯”的實現,可以提高專案的開發效率、減少開發者非關業務邏輯的事情而煩惱。例如: 開發者A: 請問元件的對話窗如何在確認時控制關閉或開啟狀態? 這個實際案例是架構師認為對話窗的動作
Thumbnail
如果前人已經走出一條最佳路徑,我們只顧著欣賞也會到山頂 關注點的改變 一個好的架構都會希望讓開發者能專注在”業務邏輯”的實現,可以提高專案的開發效率、減少開發者非關業務邏輯的事情而煩惱。例如: 開發者A: 請問元件的對話窗如何在確認時控制關閉或開啟狀態? 這個實際案例是架構師認為對話窗的動作
Thumbnail
Vue 筆記,Nuxt 簡介
Thumbnail
Vue 筆記,Nuxt 簡介
Thumbnail
Vue3 學習筆記,vue-router 篇。
Thumbnail
Vue3 學習筆記,vue-router 篇。
Thumbnail
Vue3 學習筆記,元件與資料傳遞篇
Thumbnail
Vue3 學習筆記,元件與資料傳遞篇
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由,name 如果你沒有要用路由傳參,不寫也沒關係,component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像,用法是像
Thumbnail
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由,name 如果你沒有要用路由傳參,不寫也沒關係,component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像,用法是像
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News