路由懒加载实现及其原理

一. 为什么要进行路由懒加载

学习Vue的时候，各类教程都会告诉我们：Vue 的特点是SPA——Single Page Application（单页应用程序）。
它有着诸如：“只有第一次会加载页面, 以后的每次页面切换，只需要进行组件替换；减少了请求体积，加快页面响应速度，降低了对服务器的压力” 等等优点。
但是呢！因为Vue 是SPA，所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。
这样就会导致首页加载时加载了许多首页用不上的资源，造成网站首页打开速度变慢的问题，降低用户体验。
为了解决上面问题，我们需要对Vue实现组件懒加载（按需加载）。
总结：为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。

二. 定义

懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

三. 使用

1. 在router.js中，路由进行懒加载

 {
    path: '/confirm_order',
    name: 'confirm_order',
    meta: {
      title: "确认订单",
      page_name: "确认订单页",
      page_id: `C#h5#goods#confirm_order`,
      page_path: `C端#H5#商品#确认订单页`,
    },
    component: () => import(/* webpackChunkName: "ConfirmOrder" */ '../views/confirm_order')
  },

2. 引入组件，组件进行懒加载

  components: {
    ActiveSelectUser: () => import(/* webpackChunkName: "ActiveSelectUser" */ "@/lib/ActiveSelectUser/index.js")
  },