vue路由懒加载之分包 分模块加载

路由懒加载 分包

如下代码，

1. Home无任何处理，直接引入
2. Ceshi 运用官方推荐的路由懒加载，优化首页加载的时间，这种方式引入的是一个promise
3. About在路由懒加载的基础上，进行了分包，webpackChunkName: “name”，注意该注释，name一样的会被打包在一起。注释不可省略。只有在跳到该路由的时候，才会加载

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/demo/Home.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/demo/About.vue"),
  },
  {
    path: "/ceshi",
    name: "Ceshi",
    component: () => import("../components/demo/Composition.vue"),
  },
];