返回 导航

Vue.js

hangge.com

Vue.js - 路由的懒加载实现详解（组件的异步加载）

作者：hangge | 2026-09-01 09:19
    在真实开发过程中，一个项目可能会包含大量页面组件。如果这些组件都没有使用异步加载，那么在打包构建生产项目时，JavaScript 包会变得非常大，从而影响页面的首屏加载速度，为了解决这个问题，可以将不同路由对应的组件分割成不同的代码块，然后在访问路由时才加载对应的组件。这种做法不仅更加高效，还可以提高首屏加载速度。实际上，Vue Router 默认就支持异步加载组件，也就是所谓的路由懒加载，下面我将通过样例进行演示。

1，未配置路由懒加载情况

（1）下面是一个 Vue.js 项目的 src/router/index.js 文件内容，可以看到 component 属性直接接收一个组件，没有配置任何路由懒加载。
import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";
import AboutView from "../views/AboutView.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    component: AboutView,
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

（2）将项目编译打包后生成的文件如下，可以看到生成的 js 只有两个，其中：
  • app.4c13ceeb.js 文件存放的是我们编写的所有代码。
  • chunk-vendors.7a4240ff.js 文件存放的是第三方库的代码。

2，配置路由懒加载的情况

（1）将 src/router/index.js 文件内容进行修改，这次的 component 属性会接收一个函数，该函数需要返回一个 Promise 对象，而 import 函数正好可以动态导入组件并返回一个 Promise 对象。
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: () => import("../views/HomeView.vue"),
  },
  {
    path: "/about",
    name: "about",
    component: () => import("../views/AboutView.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

（2）自 webpack3.x 起，就支持对分包进行命名（chunk name）。在 import 函数的参数中添加魔法注释，例如 /*webpackChunkName:"自定义分包名" */，即可对分包进行命名。
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: () =>
      import(/* webpackChunkName: "home" */ "../views/HomeView.vue"),
  },
  {
    path: "/about",
    name: "about",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;
评论

全部评论（0）

回到顶部