html本身不支持按需加载模板，必须通过javascript（如fetch或import()）控制请求与插入时机；常见错误包括路径解析错误、脚本不执行、样式丢失及重复请求；推荐用insertadjacenthtml配合fetch，并注意缓存、降级与安全风险。
HTML模板本身不支持按需加载，得靠JS控制时机
HTML 没有原生的“按需加载 HTML 模板”机制。所谓“模板按需加载”，本质是用 JavaScript 控制资源请求和插入时机，HTML 只提供容器或占位结构。直接写 <include src="header.html"></include> 或 <template src="card.html"></template> 在标准浏览器里完全无效——这些标签不会被解析为加载指令。
常见错误现象包括：页面空白、控制台报 404（路径错）、innerHTML 插入后脚本不执行、样式丢失、重复请求同一模板。
- 所有 HTML 片段加载必须由 JS 主动发起，比如
fetch()或import() - 路径解析以入口 HTML 文件所在目录为基准，不是当前 JS 文件位置；可用
new URL('./footer.html', import.meta.url)构造可靠绝对路径 - 若模板含
<script></script>，浏览器默认不执行；手动执行需遍历并动态创建script标签（仅限可信源，否则 XSS 风险极高） - 用
insertAdjacentHTML()替代innerHTML，避免意外触发内联脚本执行
fetch + insertAdjacentHTML 是最轻量的纯 HTML 片段加载方式
适用于无交互逻辑、仅含结构+样式的组件，比如 header、footer、帮助弹窗内容等。它绕过模块打包流程，也不依赖框架，运行时开销小，且不受 CSP unsafe-eval 限制。
典型错误是忽略缓存策略，导致开发环境反复拉取 stale 内容；或未处理加载失败，造成 DOM 空白。
- 推荐加
cache: 'force-cache'或手动拼时间戳参数，如fetch('./sidebar.html?t=' + Date.now()) - 始终用
insertAdjacentHTML('beforeend', html)，而非innerHTML = html -
<img src="logo.png">会自动加载，但<img>需额外解析并赋值src - 加载失败时显式降级：
fetch('./card.html').catch(() => el.textContent = '加载失败')
import() 加载的是组件模块，不是裸 HTML
真正做代码分割，必须用 import() 加载封装好的组件（如 Vue 的 .vue 文件、React 的函数组件）。构建工具（Vite/Webpack）会识别该调用并打成独立 chunk，实现 JS/CSS/HTML 模板三者一起分割。
容易踩的坑是路径写错或误当同步导入用：写成 import('./Modal.vue') 在顶层就执行，等于没按需；或者用变量拼路径，如 import(`./${name}.vue`)，构建时无法静态分析，直接报错。
- 必须包裹在事件回调或路由守卫中，例如：
button.addEventListener('click', () => import('./Modal.vue').then(m => m.default())) - 路径只能是字符串字面量，相对当前模块，禁止变量、
__dirname、process.env参与 - React 中必须用
React.lazy(() => import('./Chart'))，不能漏掉箭头函数包装 - Vue Router 的
defineAsyncComponent必须配ssr: false，否则服务端水合失败
构建时内联模板适合稳定不变的全局组件
如果 header、copyright 这类内容上线后极少改动，用构建时展开（如 Rollup 的 rollup-plugin-html）比运行时加载更安全：零网络请求、零竞态、兼容 IE11（只要输出语法不过时）。
但它不支持传参，也不能响应数据变化。一旦写了 <include src="header.html"></include>，就意味你放弃了运行时灵活性。
- 路径始终相对于入口 HTML，不会因 JS 模块位置迁移而失效
- 若
header.html里有<link href="style.css">，默认不会重写路径，建议统一用根路径/css/style.css - 无法实现
<header title="首页"></header>这类带属性的调用，必须升级为 Custom Element 或模板引擎 - 真正难排查的是资源泄漏：哪怕用了最“干净”的内联方式，若 Custom Element 的
disconnectedCallback没清理定时器或IntersectionObserver，内存就悄悄涨
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
