浅谈路由懒加载的实现与原理

为什么需要路由懒加载

首先,vue的特点是SPA,即单页面应用。

若没有使用路由懒加载,在webpack打包后,所有页面都会存放于同一个JS文件中,若页面数量很多,将造成JS文件过大,导致进入首页时,需要漫长的加载时间。

而运用路由懒加载,可以将页面进行划分,达到按需加载的效果,有效地分担首页承担的加载压力,减少首页的加载时间。

什么是路由懒加载

当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

懒加载的前提

进行懒加载的子模块(子组件)需要是一个单独的文件

懒加载是对子模块(子组件)进行延后加载。如果子模块(子组件)不单独打包,而是和别的模块掺和在一起,那其他模块加载时就会将整个文件加载出来了,这样子模块(子组件)就被提前加载出来了。所以, 要实现懒加载,就得先将进行懒加载的子模块(子组件)分离出来。

懒加载的实现方法

ES6的动态加载模块 - import()

() => import(`views/${component}`)

调用import()之处,被作为分离的模块起点,意思是,被请求的模块和它引用的所有子模块,会分离到一个单独的 chunk 中。

简单来讲就是,通过import()引用的子模块会被单独分离出来,打包成一个单独的文件。

vue实现路由懒加载

方法一

// 将
// import UserDetails from './views/UserDetails'
// 替换成

const UserDetails = () => import('./views/UserDetails')const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

方法二

const router = new Router({
  routes: [
   {
     path: '/list',
     component: (resolve) => {
        // 这里是你的模块 不用import去引入了
        require(['@/components/list'], resolve)
     }
    }
  ]
})

方法三

使用webpack的require.ensure技术,也可以实现按需加载。 这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。

const List = resolve => require.ensure([], () => resolve(require('@/components/list')),'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
  routes: [
  {
    path: '/list',
    component: List,
    name: 'list'
  }
 ]
}))

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值