HTML模块化非浏览器原生能力，需构建工具（如Vite插件）或服务端方案（SSI、模板引擎）模拟；Vite需手动配置插件支持HTML导入，且仅生成静态字符串；真正实用的是路由级与组件级双层代码拆分。
HTML模块化本身不依赖代码拆分
HTML原生没有模块系统，<script type="module"> 和 import 只作用于 JavaScript，对 HTML 文件无直接支持。所谓“HTML模块化”，实际是靠构建工具（如 Vite、Webpack）或运行时方案（如 Lit、HTMX）模拟的，并非浏览器原生能力。你写一个 <include src="header.html">，浏览器根本不会解析——它只是字符串，必须经预处理或服务端渲染才生效。
常见误解是把“组件化写法”等同于“模块化加载”，但二者目标不同：模块化关注可复用结构，代码拆分关注资源按需加载。你可以有模块化 HTML 却不做代码拆分（所有模板全量打包），也可以做代码拆分却不用模块化（动态 fetch() 一段 HTML 字符串再 insertAdjacentHTML）。
Vite + HTML 模块化需手动配置插件
Vite 默认只处理 .js、.ts、.css 的模块解析，.html 文件作为入口或资源被当作静态内容对待。若想在 HTML 中 import 其他 HTML 片段（比如 import Header from './components/header.html'），必须引入插件，例如 vite-plugin-html 或自定义 Rollup 插件。
- 使用
vite-plugin-html时，header.html需导出默认字符串：export default `<header><h1>My App</h1></header>`
- 在主文件中
import后需手动挂载，不能直接写<Header />（那是 JSX/框架语法） - 注意：该方式生成的 HTML 是字符串拼接，无响应式、无事件绑定，也不参与 Vite 的 HMR 热更新链路
真正实用的 HTML 拆分策略是“路由级+组件级”双层切分
现代前端工程中，有效的 HTML 拆分不是靠“把 header.html、footer.html 单独抽成文件”，而是结合路由懒加载和组件异步渲染。例如：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Vue 项目中用
defineAsyncComponent加载<Sidebar>，对应Sidebar.vue文件被单独打包为 chunk - React 中用
React.lazy(() => import('./Modal'))，触发时才请求Modal.js（含其内联的 HTML 模板） - 纯 HTML 场景下，可配合
fetch('/partials/nav.html').then(r => r.text()).then(html => el.innerHTML = html)，但要自行管理缓存、错误、重复加载
关键点：浏览器只认 JS/CSS/HTML 三类资源，HTML 本身无法声明依赖，所以所有“模块化加载”最终都得落地成 JS 控制的 fetch 或构建时的字符串替换。
服务端包含（SSI）或后端模板才是最轻量的 HTML 模块化
如果你用 Nginx 或 Apache，开启 SSI（Server Side Includes）后，可以直接在 HTML 里写：
<!--#include file="header.html" -->，服务器会在响应前合并内容。这不需要任何 JS 打包、不增加客户端复杂度，且天然支持代码拆分——每个 include 文件可独立缓存、独立部署。
Node.js 环境下用 EJS、Pug 等模板引擎也类似：<%- include('header') %>，编译阶段就完成拼接。这类方案的问题在于：失去前端开发的热更新体验，无法在本地静态服务（serve -s）中运行，必须走真实服务端或 mock 代理。
最容易被忽略的是路径上下文：SSI 的 file 是相对于当前文档路径，而构建工具里的 import 是相对于源码根目录，两者语义完全不同，混用会导致本地能跑、上线 404。
