路由懒加载
路由懒加载
路由懒加载的作用
路由懒加载 可以在进入路由时才加载对应的组件,因此可以缩短首屏加载时间,带来更好的用户体验
非路由懒加载
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home'
import Index from '@/components/index'
import About from '@/components/about'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/about', component: About },
{ path: '/index', component: Index },
{ path: '/home', component: Home }
]
})
路由懒加载的方式
1.vue异步组件实现路由懒加载
只有当进入这个路由时,才会执行require加载组件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'],resolve)
},
{
path: '/index',
name: 'index',
component: resolve => require(['@/components/index'],resolve)
},
]
})
2.import 实现路由懒加载
只有当进入这个路由时,才会执行import加载组件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
export default new Router({
routes: [
{ path: '/about', component: About },
{ path: '/index', component: Index },
{ path: '/home', component: Home }
]
})
简写形式
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/index',
component: () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
},
{
path: '/home',
component: () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
}
]
})
webpackChunkName的作用
() => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
() => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
webpackChunkName的值相同的组件会被webpack打包在一个js文件中
webpackChunkName的值不相同的组件会被webpack打包在不同的js文件中
() => import('@/components/home')
() => import('@/components/index')
没有webpackChunkName 默认不相同的组件会被webpack打包在不同的js文件中
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构