路由懒加载

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。

如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

使用了懒加载

javascript 复制代码
   export default [ {
        path: '/search/:keyword?',
        component: () =>import('@/pages/Search/index'),
        meta: { showHeader: true, showFooter: true },
        name: 'search'
    }, 
    {
        path: '/login',
        component: () =>import('@/pages/Login/index'),
        meta: { showHeader: false, showFooter: false }
    },]

不使用懒加载

javascript 复制代码
import Login from '@/view/Login'
export default [

     {
        path: '/login',
        component: () =>import('@/pages/Login/index'),
        meta: { showHeader: false, showFooter: false }
    },
]
相关推荐
可乐鸡翅yeah_33 分钟前
hls.js 多实例并发踩坑,多视频页面播放器内存与冲突问题解决
开发语言·前端·javascript·音视频·hls·m3u8·m3u8在线播放
涛涛ing41 分钟前
你的页面为什么总是卡成PPT?2026年,90%的前端都忽略了主线程
前端
SoaringHeart42 分钟前
Flutter 进阶 | 组件封装:用 CustomPainter 实现光环动画组件AnimatedHalo
前端·flutter
IT_陈寒1 小时前
JavaScript的隐式转换太坑了,我的==比较怎么就炸了?
前端·人工智能·后端
雪芽蓝域zzs1 小时前
第十四节:后端返回权限动态路由
前端·javascript·vue.js
Rain5091 小时前
谁动了我的 URL?——记一次微前端“灵异 Bug“的排查实录
前端·vue.js·人工智能·前端框架·bug·ai编程
bjzhang752 小时前
使用HTML+CSS美化上传进度条展示
前端·css·html
何以解忧,唯有..2 小时前
Vue 3 响应式核心:ref() 与 reactive() 的深入解析与实战
前端·javascript·vue.js
晴天162 小时前
Chrome DevTools Protocol(CDP)分享-Day36
前端·chrome·chrome devtools
风骏时光牛马2 小时前
程序员的职场成长:技术之外,更要修炼底层思考力
前端