路由懒加载（Vue项目的优化问题）

0.什么是懒加载

凡是懒加载都是首次加载数据量比较大时,优化至延后加载。
例如图片懒加载,当用户看不到图片时就不加载,用到时再获取数据.

1.路由懒加载

懒加载网址:https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97
平时使用的Vue属于SPA应用:single page application(单页应用)
-缺点:当页面访问时,把页面所有应用都加载回来.这导致首次打开页面的等待时间较长.

-解决:

• 口水版:可以模仿APP页面的切换方式,提升访问体验.即先把用户访问概率较高的页面先加载,访问率较低的页面访问到的时候再加载.类似小程序分包机制.
• 专业版:当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

如何实现路由懒加载

1、改变导入组件的方式，直接使用异步组件的导入方法

const Foo = () => import('./Foo.vue')

2、和平时设置路由路径方式是一样的

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

异步路由网络请求时机:当路由访问到的时候，才会去加载相应页面的资源.
如果大量使用异步路由且用户网络较慢时,页面可能会出现因数据没接收完毕而导致的空白.

{
            name: 'login',
            path: '/login',
            // 异步引入组件，确保匹配了路由才加载组件，否则不利于优化
            component: () => import('@/views/login.vue')
        }

2.把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。
语法:/* webpackChunkName: “group-foo” */
只有值可以改成包名,其余的不能改

{
            name: 'index',
            path: '/index',
            // 异步引入组件，确保匹配了路由才加载组件，否则不利于优化
            component: () => import(/* webpackChunkName: "group-foo" */ '@/views/index.vue')
        }, {
            name: 'login',
            path: '/login',
            // 异步引入组件，确保匹配了路由才加载组件，否则不利于优化
            component: () => import(/* webpackChunkName: "group-foo" */ '@/views/login.vue')
        }