【Vue】路由懒加载

如果在项目中直接 import 引入所有组件, 打包后的代码文件会很大, 影响页面加载(首屏加载时间过长), 懒加载(按需加载)就是在加载时把组件分割为不同的代码块,第一次用到的时候加载并缓存(webpack 打包后访问新组件时发送 http 请求)

实现方法

路由懒加载

// Foo.vue 文件
// 将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)
const Foo = () =>
  Promise.resolve({
    /* 组件定义对象 */
  });

// router.js 路由配置文件
const router = new VueRouter({
  routes: [
    { path: "/foo", component: () => import("./Foo.vue") }, // 方法一: 路由懒加载, 使用webpack2的代码分块点写法
    { path: "/foos", component: (resolve) => require(["/foo"], resolve) }, // 方法二: 异步组件,使用require引入, require 一参为要引入的组件, 参数为数组, 二参为回调函数
  ],
});

组件懒加载

// 同路由懒加载, 在需要的时候才加载并缓存
export default {
  components: {
    foo: () => import("./foo"),
    foos: (resolve) => require(["./foo"], resolve),
  },
  data() {},
};

webpack 把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

const Foo = () => import(/* webpackChunkName: "group-foo" */ "./Foo.vue");
const Bar = () => import(/* webpackChunkName: "group-foo" */ "./Bar.vue");
const Baz = () => import(/* webpackChunkName: "group-foo" */ "./Baz.vue");

加载异步组件时的 resolve 函数

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

1. 这里的 resolve (注意 resolve 只是形参) 是 vue-router 返回的方法, 只执行一次, 用于(挂载组件?), 接收 require 引入的模块为参数

2. require 的一参为要引入的模块, 为多个时用数组形式传入, 二参为引入完成后的回调函数, 该回调函数的参数为一参引入的模块, 多个模块时为多个参数而不是数组

改写为以下形式也可执行

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