使用路由懒加载的原因

在这里插入图片描述

路由懒加载使用前后对比

没有使用路由懒加载时
解析下面三个文件分别的作用
app文件是自己写的业务代码的整合,manifest文件是为我们打包的代码做底层支撑的,比如使commonjs的导入导出和es6的导入导出是有效的,vendor是处理第三方的工具比如vue的一些代码的整合

在这里插入图片描述

使用懒加载后
在这里插入图片描述

懒加载的三种方式

第一种方法(不推荐已经很老了)
在这里插入图片描述
AMD写法
在这里插入图片描述
常用的最新写法
在这里插入图片描述

const Home = () =>import('../components/Home')
const about = () =>import('../components/about')
const User = () =>import('../components/User')

const routes = [

  {
    path: '/',
    component: Home
  },
  {
    path: '/about',

    component: about
  },
  {
    path:'/user/:abc',
    component:User
  }
]

Logo

前往低代码交流专区

更多推荐