首页 > 文章 > 前端

HTML公共部分如何复用？实用技巧分享

时间：2026-03-21 11:21:43 427浏览收藏

HTML公共部分复用是前端开发中绕不开的痛点，但浏览器原生不支持include语法，直接使用会导致解析失败或内容裸露；真正可行的方案只有三类：构建时预处理（如Vite配合vite-plugin-html或Vue组件化复用）、服务端模板渲染（如EJS、Pug），或客户端JS动态加载（fetch+insertAdjacentHTML）；需根据项目类型权衡——静态站点慎用fetch防CSP拦截，Vite项目优先选插件注入或.vue组件而非raw导入，绝对避免iframe（损害SEO、样式隔离难、交互异常）和客户端fs.readFile（根本不可用）；关键是要让首屏核心公共块（如导航）内联保障体验，非关键部分再异步加载，兼顾性能、可维护性与用户体验。

html公共部分怎么引用_html公共代码复用【妙招】

HTML 公共部分怎么用 `include`？浏览器根本不认

浏览器原生不支持 include，直接写或会原样显示甚至报错。这不是你写错了，是它本来就不能跑。

真正能落地的只有三类方案：构建时处理、服务端渲染、或 JS 动态加载——选哪个取决于你有没有构建流程、要不要 SEO、以及是否接受首屏延迟。

静态站点（无构建）→ 用 fetch + insertAdjacentHTML，但注意 CSP 策略可能拦掉本地文件读取
用 Vite / Webpack → 直接 import HTML 片段（需插件，如 vite-plugin-html 或 html-webpack-plugin 的 templateParameters）
Node.js 后端 → 模板引擎（ejs、pug）天然支持 <% include("header.ejs") %>，服务端拼好再吐给浏览器

用 `fetch` 加载公共 HTML 片段，为什么页面闪一下才出现导航？

因为 JS 是异步执行的，fetch 请求完成前，DOM 已经渲染完毕，导航栏位置留空；等请求回来再插入，用户就看到“闪现”。这不是 bug，是同步渲染逻辑缺失导致的体验断层。

缓解办法不是加 loading，而是把关键公共块（比如

）提前内联，非关键部分（比如页脚统计代码）再异步加载：

首页 HTML 中手动写入 ...，保证首屏完整
用 document.addEventListener('DOMContentLoaded', ...) 延迟加载 footer.html 这类非阻塞内容
避免在里 fetch，容易触发 parser-blocking

Vite 项目里怎么复用 `header.html`？别碰 `raw` 插件

import header from './header.html?raw' 看似简单，但只是读成字符串，你得自己 el.innerHTML = header，还得手动处理 script 标签执行、事件绑定丢失、重复插入等问题——实际比写两遍还累。

正确做法是用社区验证过的方案：

装 vite-plugin-html，在 vite.config.ts 里配 inject: { data: { header: fs.readFileSync('./src/_shared/header.html', 'utf8') } }，模板里用 <%= header %>
或者更现代的：把公共块写成 .vue 单文件组件（哪怕只含 template），
复用干净利落，还能响应式更新
千万别用 fs.readFileSync 在客户端代码里读文件——Node.js API 浏览器里根本不存在