【Vue】路由按需載入(路由懶載入) component: resolve => require([‘../pages/home.vue‘], resolve)
Vue 路由按需載入(路由懶載入) component: resolve => require([’…/pages/home.vue’], resolve)
vue非同步元件技術 ==== 非同步載入
vue-router配置路由 , 使用vue的非同步元件技術 , 可以實現按需載入
但是,這種情況下一個元件生成一個js檔案
import Vue from 'vue'
import VueRouter from 'vue-router'
// "@"相當於".."
import Detail from '../pages/goodsDetail'
import Msg from '../components/message.vue'
// 使用路由
Vue.use(VueRouter)
export default new VueRouter({
mode: 'history',
routes: [
{
// 進行路由配置,規定'/'引入到home元件
path: '/',
component: resolve => require(['../pages/home.vue'], resolve),
meta: {
title: 'home'
}
},
{
path: '/msg',
component: Msg
},
{
path: '/detail',
component: Detail,
children: [
{
path: 'msg',
component: Msg
}
]
}
]
})
component: resolve => require(['../pages/home.vue'], resolve)
如果用import引入的話,當專案打包時路由裡的所有component都會打包在一個js中,造成進入首頁時,需要載入的內容過多,時間相對比較長
當你用require這種方式引入的時候,會將你的component分別打包成不同的js,載入的時候也是按需載入,只用訪問這個路由網址時才會載入這個js
打包的時候看看目錄結構就明白
相關文章
- Vue 路由按需載入(路由懶載入)Vue路由
- vue路由懶載入Vue路由
- vue(18)路由懶載入Vue路由
- Vue 非同步元件&路由懶載入Vue非同步元件路由
- 【vue系列】當 element-ui 按需引入遇到 vue-router 路由懶載入VueUI路由
- Vue路由元件按需載入的幾種方法Vue路由元件
- Vue-Router學習第二彈動態路由\懶載入\巢狀路由Vue路由巢狀
- vue3 + vite實現非同步元件和路由懶載入VueVite非同步元件路由
- 記一次 Laravel-mix 使用 vue 路由懶載入填坑LaravelVue路由
- Vue元件懶載入Vue元件
- Vue 的懶載入Vue
- Zuul- 路由載入Zuul路由
- VUE如何實現按需載入?Vue
- vue後臺管理之動態載入路由Vue路由
- angular路由中的惰性載入Angular路由
- 懶載入和預載入
- 懶載入
- 手把手實現圖片懶載入+封裝vue懶載入元件封裝Vue元件
- Vue非同步元件處理路由元件載入狀態Vue非同步元件路由
- vue 動態載入路由,渲染左側選單欄Vue路由
- vue-cli懶載入問題Vue
- 按需載入(code spliting)
- 按需載入原理分析
- Ribbon - 懶載入
- 圖片預載入和懶載入
- vue圖片懶載入lazy-loadVue
- 為什麼我寫了路由懶載入但程式碼卻沒有分割?路由
- vant元件庫按需載入元件
- 前端效能優化 --- 懶載入&預載入前端優化
- 【譯】懶載入元件元件
- 圖片懶載入
- Hibernate 之 懶載入
- 淺入深出Vue:路由Vue路由
- VUE系列之效能最佳化--懶載入Vue
- React乾貨:SPA單頁如何規劃路由、設計Store、劃分模組、按需載入React路由
- [譯] React 16.6 懶載入(與預載入)元件React元件
- 在vue3中手寫按需載入圖片Vue
- vue專案打包,解決靜態資源無法載入和路由載入無效(404)問題Vue路由