vue路由懒加载

在 Vue 项目中，路由懒加载是通过 动态 import 实现的：

1. 我们在 vue-router 的路由配置里，把 component 写成一个函数，返回 import() 语句：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/about',
    component: () => import('@/views/About.vue')  // 懒加载
  }
]

const router = new VueRouter({ routes })
export default router

这样 Webpack/Vite 会把 About.vue 单独打包成一个 chunk，只有当用户访问 /about 时才会加载这个文件，从而减少首屏体积。

2. 如果需要调试更直观，可以使用 Webpack 魔法注释 给 chunk 命名：

const routes = [
  {
    path: '/home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue')
  },
  {
    path: '/about',
    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
  }
]

这里多了一个注释 /* webpackChunkName: “home” */

• 打包后生成 home.js、about.js等独立文件

• 好处是文件名可控，调试和分析 bundle 的时候更直观

常见魔法注释：

• webpackChunkName: 指定 chunk 的名字

• webpackPrefetch: true: 告诉浏览器空闲时预取这个 chunk

• webpackPreload: true: 高优先级预加载

3. 在 Vue3 里，还可以用 defineAsyncComponent 来实现懒加载，同时加上 loading/error 组件：

import { defineAsyncComponent } from 'vue'

const About = defineAsyncComponent(() => import('@/views/About.vue'))

const routes = [
  { path: '/about', component: About }
]

可以自定义 加载中组件 / 错误组件 / 延迟加载时间：

const AsyncAbout = defineAsyncComponent({
  loader: () => import('@/views/About.vue'),
  loadingComponent: Loading,
  errorComponent: LoadError,
  delay: 200, // 200ms 后才显示 loading
  timeout: 3000 // 超过 3s 报错
})

4. 对于 Nuxt3 这类框架，页面路由是 自动懒加载 的，不需要手动配置。

总结

路由懒加载的本质是 利用动态 import 进行代码分割，在 vue-router 中把 component 写成一个返回 import() 的函数，Webpack/Vite 会自动打包成独立的 chunk，只有在访问该路由时才会请求对应的 JS 文件，从而降低首屏加载压力。