Vue项目首屏加载慢的根源在于所有组件打包进同一app.js，解决关键是按需加载；路由懒加载通过import()动态导入组件，使Webpack自动拆分为独立chunk，实现用时加载。
Vue 项目首屏加载慢，往往是因为所有组件和依赖被打包进了同一个 app.js，浏览器得一次性下载、解析、执行大量 JS，自然卡顿。解决的关键不是“优化单个组件”，而是**按需加载——页面用到什么，再加载什么**。路由懒加载就是最直接、最有效的一招。
什么是路由懒加载？
懒加载（Lazy Loading）指：组件不在应用初始化时加载，而是在路由匹配到该路径、准备渲染对应页面时，才动态导入（import()）并实例化组件。Webpack 会自动把这部分代码拆成独立的 chunk 文件，实现“用时加载、按需下载”。
对比写法：
-
不懒加载（全部打包进主包）：
component: Home或component: require('./views/Home.vue') -
懒加载（生成独立 chunk）：
component: () => import('./views/Home.vue')
怎么在 Vue Router 中配置懒加载？
只需把路由配置中的 component 值，从直接引用改为一个返回 Promise 的函数即可。Vue 和 Webpack 会自动处理异步加载与组件注册。
立即学习“前端免费学习笔记（深入）”；
示例（Vue Router 4 / Vue 3）：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
const routes = [
{
path: '/home',
name: 'Home',
// ✅ 正确：使用 import() 返回 Promise
component: () => import('@/views/Home.vue')
},
{
path: '/user',
name: 'User',
// ✅ 支持命名 chunk（便于调试和缓存控制）
component: () => import(/* webpackChunkName: "user-module" */ '@/views/User.vue')
}
]小提示：
- 推荐配合
/* webpackChunkName: "xxx" */注释，让同组页面共用一个 chunk，避免过度拆分 - 不要用
require.ensure（已废弃），也不要写成import('./xx').then(...)—— 路由配置只接受返回 Promise 的函数，不是 Promise 实例本身
懒加载后如何验证是否生效？
不能只看页面“好像快了”，要确认代码确实被拆分：
- 运行
npm run build后，打开dist/js/目录，检查是否出现多个xxx.xxx.js文件（如123.abc.js、user-module.xyx.js） - 打开 Chrome DevTools → Network 标签页 → 切换到某个路由 → 观察是否只加载了当前页面对应的 chunk，而不是整个 app.js
- 在 Console 中输入
__webpack_require__.e可查看已加载的动态 chunk 列表（高级调试用）
进阶建议：搭配 Suspense & 骨架屏更丝滑
懒加载虽快，但网络差时仍可能有白屏或闪动。Vue 3 支持 <Suspense> 统一处理异步组件加载状态：
<template>
<RouterView>
<template #default="{ Component }">
<Suspense>
<template #default>
<component :is="Component" />
</template>
<template #fallback>
<div class="skeleton">Loading...</div>
</template>
</Suspense>
</template>
</RouterView>
</template>这样用户看到的是可控的加载态，而非空白或报错。
不复杂但容易忽略。
