HTML本身不支持组件懒加载，实际由前端框架或构建工具在JS层实现，HTML仅承载生成的script标签。
HTML 本身不支持组件级别的懒加载——它没有模块系统、无法动态 import、也没有运行时路由或组件挂载逻辑。所谓“HTML 中的组件懒加载”，实际是前端框架（Vue/React）或构建工具（Vite/Webpack）在 JS 层实现的，HTML 只负责承载最终生成的 <script> 标签。
为什么直接写 HTML + 原生 JS 无法实现组件懒加载
浏览器解析 <script src="xxx.js"></script> 时会立即下载执行（除非加 defer 或 async），但这不是“按需”；import('./Component.js') 在纯 HTML 环境下会报错：Failed to resolve module specifier，因为原生浏览器只支持 type="module" 且需服务端开启 ES modules 支持，还要求路径是绝对 URL 或以 /、./、../ 开头。
- 没打包器时，
import()加载的不是“组件”，而是裸 JS 文件，无法自动渲染模板或绑定响应式逻辑 - 即使 fetch 到一段 HTML 字符串并插入
innerHTML，其中的<script>不会执行，<style>不会作用域隔离 - 你写的
<my-card></my-card>若没注册自定义元素，浏览器直接忽略，不会触发任何加载行为
Vue 中用 defineAsyncComponent 包裹 import() 才真正可控
Vue 3 推荐写法不是直接在路由里写 component: () => import('./About.vue')，而是显式用 defineAsyncComponent 包一层：
import { defineAsyncComponent } from 'vue'
const About = defineAsyncComponent({
loader: () => import('./About.vue'),
loading: LoadingSkeleton,
error: ErrorFallback,
delay: 200,
timeout: 5000
})
- 不包装的话，加载失败直接白屏，无 fallback；
defineAsyncComponent提供了完整的错误边界和加载态控制 -
delay防止快速划过时闪烁 loading，timeout避免请求卡死阻塞后续交互 - SSR 场景下，未包裹的
import()可能被提前执行，导致 chunk 提前注入，失去懒加载意义 - Vite/Webpack 会把该
import()拆成独立 chunk（如about.abc123.js），但文件名 hash 和拆包策略依赖构建配置，不是 HTML 决定的
React Router v6.4+ 的 lazy 必须配 Suspense，否则崩溃
React.lazy(() => import('./Dashboard')) 返回的是一个组件工厂函数，不是可渲染节点。它必须被 <Suspense fallback=<Spinner />> 包裹，否则会抛出致命错误：Unhandled Runtime Error: A component suspended while responding to synchronous input。
立即学习“前端免费学习笔记（深入）”；
-
fallback必须是同步可渲染的内容：不能是空字符串、null，也不能是另一个lazy组件 - 嵌套路由中，推荐在外层统一用一个
<Suspense>捕获所有子路由，避免每层都写重复 fallback - 若组件内部用了
useEffect或fetch，且未处理 pending 状态，用户可能看到空白页而非 loading，这不是懒加载问题，是组件自身状态管理缺失 - 构建后，
lazy对应的 chunk 文件由 Webpack/Vite 自动生成，HTML 中只保留主入口 script，不包含这些 chunk 的<script>标签
纯 HTML 场景下唯一可行的“类组件懒加载”是 fetch + v-html（仅限静态内容）
如果你没用框架，又想点击按钮后加载一段 UI 片段（比如弹窗、协议条款），可用 fetch 请求服务端返回的纯 HTML 字符串，再注入 DOM：
button.addEventListener('click', async () => {
const res = await fetch('/api/terms.html')
const html = await res.text()
container.innerHTML = html // 注意：script 不执行，img src 会加载，data-src 不会
})
- 服务端返回内容必须是干净片段，不含
<html>、<body>外壳，例如：<div class="modal"><h2>用户协议</h2><p>.../div> -
<script>标签不会执行——要执行就得用DOMParser解析后遍历script元素，再动态创建并插入（⚠️仅限可信源，否则 XSS） - 事件绑定必须手动重做：
container.querySelectorAll('.btn-close').forEach(btn => btn.addEventListener(...))，否则新节点无响应 - 这不算真正的“组件懒加载”，只是 HTML 片段注入，无状态、无复用、无生命周期，适合配置页、帮助文档等静态区块
真正关键的点在于：懒加载的“组件”本质是 JS 模块，不是 HTML 标签；HTML 只是容器，不参与加载决策。构建工具决定怎么拆 chunk，框架决定什么时候调用 import()，浏览器只负责执行已加载的 JS —— 把责任归给 HTML，只会陷入无解循环。
