Vue router 懒加载

2019-02-12 14:35 #旧文章

首先给出一般的 Vue router 配置文件

import Foo from "./views/Foo";

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

这样我们就简单的实现了一个路由，这样是一次性加载，在页面加载时就把所有的路由页面加载到浏览器中，这在网速不快的情况下让用户体验大打折扣。

为了解决这个问题我们就要配置懒加载，这实际上很简单，就是将 component 的值换成一个 Promise 对象，给出例子

const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: () => import("./views/Foo"),
    },
  ],
});

这样就可以通过 Vue 的异步组件和 Webpack 的代码分块实现懒加载了。