懒加载,就是lazy-loading,顾名思义延迟加载,什么时候用到了什么时候去加载;

一个普通的Vue单页应用项目,直接去使用webpack去打包,那么打包后的javascript包体积会非常的大,导致进入首页的时间会非常长;于是就有了懒加载的思路;


那么什么是路由懒加载呢?

把不同路由对应的不同组件分割成不同的代码块,当路由被访问时,再去加载对应的组件 这就是利用vue的异步组件和webpack的代码分割;

想了解vue异步组件,请挪步这里
想了解webpack的代码分割,请挪步这里

路由懒加载具体代码实现:

export default new Router({
  routes: [
    {
      path: '/',
      component: resolve => require(['components/index.vue'], resolve)
    },
    {
        path: '/about',
        component: resolve => require(['components/About.vue'], resolve)
    }
  ]
})
Logo

前往低代码交流专区

更多推荐