路由懒加载的核心原理是利用动态import()语法触发构建工具在打包时自动将对应模块抽离为独立chunk。Webpack通过runtime控制加载并支持webpackChunkName注释和splitChunks优化；Vite基于原生ESM，开发阶段直接HTTP请求，构建阶段由Rollup处理分块并自动注入modulepreload。
路由懒加载的核心原理是利用 JavaScript 的 动态 import() 语法，让构建工具识别“此处需异步加载”，从而在打包时自动把对应模块抽离成独立的 chunk 文件，而不是塞进主包里。
动态 import() 是分块的触发器
只要代码中出现 import('./SomeComponent.vue') 这样的写法，Webpack 和 Vite 都会把它当作一个“代码分割点”（split point）：
- 不是运行时才决定要不要加载，而是在构建阶段就静态分析出：这个路径代表一个待拆分的模块
- 该模块及其所有直接依赖（比如组件里用到的工具函数、子组件等）会被一起打包进一个新的 chunk
- 主 bundle 不再包含它的代码，只保留一个动态加载逻辑（如
__webpack_require__.e或原生import()调用）
Webpack 怎么生成 chunk？
Webpack 把每个 import() 调用编译为一个异步 chunk，并通过内部 runtime 控制加载流程：
- 默认生成带 hash 的文件名（如
src_views_Home_vue.abc123.js），避免缓存问题 - 支持
/* webpackChunkName: "home" */注释，用于命名 chunk，方便调试和长期缓存 - 结合
optimization.splitChunks可进一步合并多个懒加载模块（例如把所有用户中心页归到user-chunk） - 加载时由 Webpack runtime 插入
<script></script>标签发起请求，支持错误重试、预加载（webpackPrefetch）等扩展能力
Vite 怎么生成 chunk？
Vite 在开发阶段直接走浏览器原生 ESM 加载，构建阶段交由 Rollup 处理分块逻辑，更轻量、更标准：
- 开发时：
import()就是真实 HTTP 请求，HMR 响应快，不经过打包 - 构建时：Rollup 自动将
import()提取为 async chunk，输出类似src_views_Home_vue.f4a7b2.js - 自动注入
<link rel="modulepreload">，提升二级页面加载速度 - 可通过
build.rollupOptions.output.manualChunks手动聚合模块（如把./src/User*合并为user-group.js） - 不支持 Webpack 特有注释（如
webpackPrefetch），但可通过插件或import.meta.webpackIgnore兼容部分场景
最终效果一致，机制不同
无论 Webpack 还是 Vite，用户访问懒加载路由时的行为是一致的：
- 先渲染骨架或 loading 状态（配合
Suspense或路由守卫） - 发起对目标 chunk 的网络请求
- 下载完成 → 解析模块 → 实例化组件 → 挂载渲染
区别在于构建速度、热更新体验和 chunk 管控粒度：Vite 构建更快、HMR 更精准；Webpack 配置更灵活、生态插件更丰富。选哪个取决于项目阶段和团队偏好。
