静态多页应用（MPA）中页眉页脚必须在构建阶段注入，因fetch+innerHTML会导致首屏闪白、SEO失效、Lighthouse评分下降、Safari解析失败、CORS拦截及资源加载顺序失控；Webpack+html-webpack-plugin通过读取partial文件并在模板中内联展开，确保语义完整、首屏直达、SEO友好。
静态多页应用（MPA）中，页眉页脚必须在构建阶段注入，而不是靠运行时 JS 拼接或 iframe 套娃——后者会破坏语义、拖慢首屏、绕过 SEO 索引，且无法保证资源加载顺序。
为什么不能用 fetch + innerHTML 动态加载 header.html
常见错误现象：页面先闪白，再渲染导航栏；SEO 抓取不到导航链接；Lighthouse 评分掉帧；部分浏览器（如 Safari）对跨域或同源但 MIME 类型不匹配的 header.html 直接拒绝解析。
-
fetch('header.html')是异步的，<header>区域在 DOM ready 前为空，爬虫看到的是残缺结构 - HTTP/2 多路复用不保证
header.html优先于主 HTML 加载，资源竞争下可能晚于关键 CSS - 若
header.html含<script>或<link rel="stylesheet">，这些标签不会自动执行或加载 - 本地文件协议（
file://）下，fetch直接被 CORS 策略拦截，开发阶段就失败
Webpack + html-webpack-plugin 注入公共片段的实操要点
核心逻辑：让构建工具把 header.html 内容读取为字符串，作为模板参数传入，由 .ejs 或 .html 模板引擎在生成最终 HTML 时内联展开。
- 确保
header.html存放在src/partials/下，且不含<html>、<body>等顶层标签，只保留纯片段（如<nav>...</nav>） - 在
webpack.config.js中配置templateParameters，用fs.readFileSync读取并转义：
templateParameters: (compilation) => ({
headerHtml: fs.readFileSync(path.resolve(__dirname, 'src/partials/header.html'), 'utf8')
.replace(/"/g, '"')
.replace(/\n/g, '')
})src/index.html（需是 .ejs 后缀）中使用：<%= htmlWebpackPlugin.options.headerHtml %>
header.html 含变量（如当前激活菜单项），需改用更可控的模板方案（如 Nunjucks），ejs 不支持条件块嵌套在注入内容里Sails.js 的 sails-linker 如何配合 hash 任务注入静态片段
sails-linker 本身不读取外部 HTML 文件，它只根据 .linker.json 替换注释标记；要注入页眉页脚，必须先让 hash 任务产出带内容的占位文件，再由 linker 插入。
立即学习“前端免费学习笔记（深入）”；
- 在
tasks/config/hash.js中添加自定义任务，将src/partials/header.html复制到.tmp/public/partials/header.html，并确保该路径出现在.linker.json的files列表中 - 修改
tasks/config/sails-linker.js，在js和css区块之外，显式启用partials区块：
partials: {
files: ['.tmp/public/partials/**/*.html'],
inject: true,
startTag: '<!-- PARTIALS:START -->',
endTag: '<!-- PARTIALS:END -->'
}views/layout.ejs 中放置标记：<!-- PARTIALS:START --><!-- PARTIALS:END -->，sails-linker 会把匹配的 .html 文件内容原样插入sails-linker 默认不处理非 js/css 类型文件，必须手动扩展配置，否则标记会被忽略真正可靠的自动化，是让构建流程“知道”页眉页脚是内容的一部分，而非运行时补丁。任何试图绕过构建阶段的方案，都会在缓存、SEO、首屏性能上付出隐性代价——尤其当站点超过 20 个静态页时，差异会立刻暴露。
