vue中的路由懒加载

为什么要进行路由懒加载

  1. 当进行打包构建应用时，打包后的代码逻辑实现包可能会非常大。
  2. 当我们把不同的路由对应的组件分别打包，在路由被访问时再进行加载，就会更加高效。

路由懒加载所做的事情

  1. 将路由对应的组件加载成一个个对应的js包 。
  2. 在路由被访问时才将对应的组件加载。

如何使用路由懒加载呢

    routes: [   //未使用                  routes:[   //使用
    {                                       {
      path: '/imgDetail',                    path:'/imgDeatail',
      name: 'imgDetail',                     name::'imgDetail',
      component: imgDetail                   component:()=>import('../components/imgDetail')
    },                                     },
  ]                                       ]
 
 或者依然使用第一种路由的声明方式，但是在函数外部引用：
   const imgDetail = ()=> import('./components/imgDetail')
复制代码