1.路由元件懶載入

// router/index.js檔案中 改變引入方式 實現路由元件懶載入
const Msite = () => import('../pages/Msite/Msite.vue')
const Search = () => import('../pages/Search/Search.vue')
const Order = () => import('../pages/Order/Order.vue')
const Profile = () => import('../pages/Profile/Profile.vue')

// 此時的Msite等都是返回路由元件的函式，只有請求對應的路由路徑時(第一次)才會執行此函式並載入路由元件
 

2.圖片懶載入

下載

// 在main.js檔案中引入並註冊外掛
import VueLazyload from 'vue-lazyload'
// 將一張loading圖片載入進來
import loading from './common/img/loading.gif'

//生命使用
Vue.use(VueLazyload, { // 內部自定義一個指令lazy
	loading
})

// 在圖片標籤中使用 （Food元件）
<img v-lazy="food.image">

【注意】在真正的圖片food.image加載出來之前，會顯示loading.gif! 豐富使用者體驗

3.快取路由元件物件

<!-- 好處: 複用路由元件物件, 複用記憶體中路由元件獲取的後臺資料 -->
<keep-alive>
	<router-view />
</keep-alive>