路由懒加载

路由懒加载 是通过 箭头函数 + import() 实现的，常见于 vue-router 的 动态导入（Dynamic Import） 方式。

---

🚀 懒加载的写法

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/dashboard",
    component: () => import("@/views/Dashboard.vue") // 懒加载
  },
  {
    path: "/user",
    component: () => import("@/views/User.vue") // 懒加载
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

📌 这里 component: () => import("@/views/Dashboard.vue") 就是懒加载！

---

🔍 为什么要用懒加载？

✅ 减少首屏加载时间：只有访问对应页面时才会加载组件，避免一次性加载所有组件。
✅ 优化性能：特别适用于 大型项目，避免主包（bundle）过大。
✅ 自动代码拆分（Code Splitting） ：Webpack 或 Vite 会自动拆分代码，提高加载效率。

---

📌 懒加载 + 命名 Chunk

可以使用 Webpack 魔法注释 给拆分的代码块（chunk）命名：

{
  path: "/about",
  component: () => import(/* webpackChunkName: "about" */ "@/views/About.vue")
}

这样打包时，生成的文件名会是 about.[hash].js，方便调试和优化。

---

⛔ 错误写法（非懒加载）

如果直接 import，会导致组件在应用初始化时全部加载：

import Dashboard from "@/views/Dashboard.vue"; // ❌ 这样不会懒加载
{
  path: "/dashboard",
  component: Dashboard
}

📌 这样写会导致所有组件一次性加载，影响首屏速度！

---

🚀 进阶：路由懒加载 + 组件异步加载

如果要 显示加载动画，可以使用 defineAsyncComponent：

import { defineAsyncComponent } from "vue";

const AsyncDashboard = defineAsyncComponent(() =>
  import("@/views/Dashboard.vue")
);

然后在 router.js 里：

{
  path: "/dashboard",
  component: AsyncDashboard
}

📌 这样组件加载时可以显示 Loading 状态，提升用户体验！ 🚀

---

🔗 结论

✔ 懒加载的标准写法：

component: () => import("@/views/Dashboard.vue")

✔ 避免非懒加载的 import 方式：

import Dashboard from "@/views/Dashboard.vue"; // ❌ 这样会导致组件立即加载

✔ 使用 Webpack 魔法注释：

component: () => import(/* webpackChunkName: "dashboard" */ "@/views/Dashboard.vue")

这样可以有效 优化首屏加载速度，提高 Vue 项目的性能！ 🚀