vue-router路由懒加载的详解(原因,效果,和三种方式进行懒加载)

文章目录

    • 使用路由懒加载的原因
    • 路由懒加载使用前后对比
    • 懒加载的三种方式

使用路由懒加载的原因

vue-router路由懒加载的详解(原因,效果,和三种方式进行懒加载)_第1张图片

路由懒加载使用前后对比

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

vue-router路由懒加载的详解(原因,效果,和三种方式进行懒加载)_第2张图片

使用懒加载后
vue-router路由懒加载的详解(原因,效果,和三种方式进行懒加载)_第3张图片

懒加载的三种方式

第一种方法(不推荐已经很老了)
在这里插入图片描述
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
  }
]

你可能感兴趣的:(vue)