众所周知，路由懒加载是一个性能优化的点，但是为什么路由懒加载性能优化的原理是什么呢？

之前一直没想过这个问题，直到最近阿里的一次电话面试被问懵了之后才痛定思痛，决定好好想想这个问题，可是在网上也没能找出一个满意的答案，于是决定自己实践一下。。。。

话不多说，既然决定动手那么就开始吧。我们先用Vue-cli3初始化一个vue工程，选择SPA和Vue-router，其他随意。

搭建好工程之后，打开src->router->index.js发现如下代码

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    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')
  }
];

这说明一开始就vue-cli3默认是使用路由懒加载的，这时我们启动工程，打开网页，默认是路由是Home

可以看到在Home路由的时候，初始化加载了这么多文件，其中我们重点关注app.js为132kb；

然后我们切换到About路由，

可以看到，切换到About路由时，又加载了about.js，且size为prefetch cache

然后，我们把路由从懒加载换成正常的预加载。

将src->router->index.js改成如下代码：

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    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')
    component: About
  }
];

const router = new VueRouter({
  routes
});

export default router;

此时，再次打开页面，发现如下：

此时，我们可以看到，没有使用路由懒加载的话，app.js的大小为141kb，比使用了路由懒加载的大了9kb；

然后我们切换到About路由

我们发现此时并没有加载about.js，那是因为about.js的内容都已经合并到app.js了，并且初始化的时候就都已经加载了。这也是此时app.js比懒加载的时候多了9kb的原因。

我们可以在app.js中搜索about page来找到原来about.vue中的内容

这证明了我们的猜想，此时about路由中的内容一并打包到了app.js中去了，且页面一开始就加载了。

所以，路由懒加载能做到性能优化的原因就是：webpack会将懒加载的路由分块打包到一个单独的js中去，只有加载该路由的时候，才会加载这个chunk文件。

这还是只有两个路由，且另一个路由中内容很少内容的时候；如果有多个路由，且路由内容很多的时候就绝不仅仅是多9kb的内容了。

由此可见路由懒加载是非常有必要的一个性能优化选项。