当前位置：首页 > news >正文

vue路由懒加载

news 2025/8/18 13:23:47

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

我们在 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 时才会加载这个文件，从而减少首屏体积。

如果需要调试更直观，可以使用 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: 高优先级预加载

在 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 后才显示 loadingtimeout: 3000 // 超过 3s 报错
})