HTML本身不支持路由懒加载，因其无运行时、模块系统和动态import；实际由前端框架或构建工具在JS层实现，HTML仅承载script标签。
HTML 本身不支持路由懒加载——它没有运行时、没有模块系统、也没有动态 import。所谓“HTML 路由懒加载”，实际是前端框架（如 Vue/React）或构建工具（如 Vite/Webpack）在 JS 层实现的，HTML 只负责承载最终生成的 <script> 标签。
为什么直接写 HTML 无法做路由懒加载
HTML 是静态标记语言，浏览器解析到 <script src="xxx.js"> 就会立即下载执行（除非加 defer 或 async，但那不是“按路由加载”）。真正的懒加载依赖：
- JS 运行时能识别当前 URL 并决定加载哪个模块
- 支持动态
import()语法（返回 Promise） - 构建工具能把组件拆成独立 chunk，并生成对应文件名
如果你只写纯 HTML + 原生 JS，又没用任何框架或打包器，import('./page-a.js') 会报错：Failed to resolve module specifier（浏览器不支持相对路径动态导入，除非用 type="module" 且服务端支持 ES modules）。
Vue Router 中 defineAsyncComponent 和 import() 的区别
Vue 3 推荐用 defineAsyncComponent 包裹异步组件，而不是直接在 routes 里写 component: () => import('./About.vue')。虽然两者都能工作，但关键差异在错误处理和加载状态：
立即学习“前端免费学习笔记（深入）”；
- 直接
import()：加载失败时整个路由白屏，无 fallback -
defineAsyncComponent：可配置loading、error、delay、timeout，比如defineAsyncComponent({ loader: () => import('./About.vue'), loading: LoadingComp, error: ErrorComp }) - 构建时表现一致：Webpack/Vite 都会把
import()提取为独立 chunk，文件名含 hash（如123.abcd.js）
别漏掉 defineAsyncComponent 的显式包装——否则 SSR 或某些构建场景下可能提前执行 import，失去懒加载意义。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
React Router v6.4+ 的 lazy + Suspense 必须成对出现
lazy(() => import('./Dashboard')) 本身只是个高阶函数，它返回的组件必须被 <Suspense fallback=<Spinner />> 包裹，否则会报错：Unhandled Runtime Error: A component suspended while responding to synchronous input.
-
Suspense是 React 的边界机制，不是可选装饰——没它，lazy组件首次渲染就卡死 -
fallback必须是同步可渲染的内容；不能是另一个lazy组件，也不能是空字符串或null - 嵌套路由中，每个
lazy子路由都得有自己的Suspense，或者统一由最外层Suspense捕获（推荐后者，避免重复 fallback）
另外，import() 路径必须是字符串字面量（不能拼接变量），否则 Webpack/Vite 无法静态分析并拆包：import(`./pages/${name}.tsx`) 会导致全部页面被打进一个 bundle。
Vite 构建后 chunk 名称不可控？用 import.meta.glob 替代
当需要根据路径动态加载组件（比如 CMS 页面），又不想写死所有 import('./pages/a.vue')，Vite 提供了更安全的方案：import.meta.glob：
const pages = import.meta.glob('./pages/*.vue', { eager: false })
// 返回对象：{ './pages/home.vue': () => import('./pages/home.vue') }
const route = {
path: '/home',
component: pages['./pages/home.vue']
}
注意点：
-
{ eager: false }是默认值，必须显式写出来才能触发懒加载（Vite 早期版本有 bug，不写会变成 eager 加载） - 匹配路径必须是相对路径字符串，不能是变量；glob 模式支持
**，但太宽泛会影响构建速度 - 生成的 chunk 文件名仍由 Vite 控制，但可通过
build.rollupOptions.output.manualChunks调整分组逻辑
真正容易被忽略的是：import.meta.glob 在生产环境必须配合服务端路由回退（如 Nginx 的 try_files $uri $uri/ /index.html），否则刷新子路由会 404——因为那些 .js chunk 是按需生成的，不是每个路径都对应真实文件。
