HTML模块化非浏览器原生能力,需构建工具(如Vite插件)或服务端方案(SSI、模板引擎)模拟;Vite需手动配置插件支持HTML导入,且仅生成静态字符串;真正实用的是路由级与组件级双层代码拆分。
HTML模块化本身不依赖代码拆分
HTML原生没有模块系统,
和
只作用于 JavaScript,对 HTML 文件无直接支持。所谓“HTML模块化”,实际是靠构建工具(如 Vite、Webpack)或运行时方案(如 Lit、HTMX)模拟的,并非浏览器原生能力。你写一个
,浏览器根本不会解析——它只是字符串,必须经预处理或服务端渲染才生效。
常见误解是把“组件化写法”等同于“模块化加载”,但二者目标不同:模块化关注可复用结构,代码拆分关注资源按需加载。你可以有模块化 HTML 却不做代码拆分(所有模板全量打包),也可以做代码拆分却不用模块化(动态
一段 HTML 字符串再
)。
Vite + HTML 模块化需手动配置插件
Vite 默认只处理
、
、
的模块解析,
文件作为入口或资源被当作静态内容对待。若想在 HTML 中
其他 HTML 片段(比如
),必须引入插件,例如
或自定义 Rollup 插件。
使用
时,
需导出默认字符串:
在主文件中
后需手动挂载,不能直接写
(那是 JSX/框架语法)
注意:该方式生成的 HTML 是字符串拼接,无响应式、无事件绑定,也不参与 Vite 的 HMR 热更新链路
真正实用的 HTML 拆分策略是“路由级+组件级”双层切分
现代前端工程中,有效的 HTML 拆分不是靠“把 header.
html
、footer.html 单独抽成文件”,而是结合路由懒加载和组件异步渲染。例如:
立即学习
“
前端免费学习笔记(深入)
”;
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
Vue 项目中用
加载
,对应
文件被单独打包为 chunk
React 中用
,触发时才请求
(含其内联的 HTML 模板)
纯 HTML 场景下,可配合
,但要自行管理缓存、错误、重复加载
关键点:浏览器只认 JS/CSS/HTML 三类资源,HTML 本身无法声明依赖,所以所有“模块化加载”最终都得落地成 JS 控制的
或构建时的字符串替换。
服务端包含(SSI)或后端模板才是最轻量的 HTML 模块化
如果你用 Nginx 或 Apache,开启 SSI(Server Side Includes)后,可以直接在 HTML 里写:
,服务器会在响应前合并内容。这不需要任何 JS 打包、不增加客户端复杂度,且天然支持代码拆分——每个 include 文件可独立缓存、独立部署。
Node.js 环境下用
、
等模板引擎也类似:
,编译阶段就完成拼接。这类方案的问题在于:失去前端开发的热更新体验,无法在本地静态服务(
)中运行,必须走真实服务端或 mock 代理。
最容易被忽略的是路径上下文:SSI 的
是相对于当前文档路径,而构建工具里的
是相对于源码根目录,两者语义完全不同,混用会导致本地能跑、上线 404。
importfetch()insertAdjacentHTML.js.ts.css.htmlimportimport Header from './components/header.html'vite-plugin-htmlvite-plugin-htmlheader.htmlexport default `My App
`importdefineAsyncComponentSidebar.vueReact.lazy(() => import('./Modal'))Modal.jsfetch('/partials/nav.html').then(r => r.text()).then(html => el.innerHTML = html)fetchEJSPug<%- include('header') %>serve -sfileimport