vue-router 路由的懒加载原理及方式

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

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

webpack打包会将所有资源文件合并压缩成一个文件，导致最终的文件非常大，甚至超过几M，以致页面首次加载会比较慢，如下图：

其中红色标出的是在浏览器中加载的js文件，gzip压缩前已经达到500多KB了。

再看看路由按需加载后：

文件被拆成一个个小的文件，即webpack的文件分割。这里是以页面为单位进行切割。具体实现如下：

通常情况下，我们引入vue文件的方式是

import RankList from ‘@/components/RankList’

然后在router里面配置

{
     
      path: '/rank-list',
      name: 'RankList',
      meta: {
     
        title: '排行榜'
      },
      component: RankList
}

按需加载只需要修改vue文件的引入方式：

{
     
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  },

/* webpackChunkName: “RankList” */ 是打包后文件名称，后面是文件路径。
‘@/components/RankList’ 是文件路径。

// 路由懒加载写法
const Home = () => import ("../views/Home.vue");
const My = () => import ("../views/My.vue");
const HomeNews = () => import ("../components/HomeNews.vue");
const HomeMsg = () => import ("../components/HomeMsg.vue");

参考：https://www.cnblogs.com/hutuzhu/p/10407258.html

https://www.cnblogs.com/mica/p/10700397.html