HTML模板拆分应弃用已废弃的HTML Imports，改用构建时合并或运行时fetch注入；构建需配置html-loader并规范子模板结构，运行时须用template隔离内容并手动处理脚本；组件化命名需唯一收敛、层级不超过两层。
HTML模板拆分必须避开HTML Imports，它已被所有现代浏览器移除
看到老项目里还有<link rel="import" href="header.html">，别修——直接删。Chrome 70+、Firefox 80+、Safari 16+ 全部废弃该特性，且无 polyfill 能可靠还原语义与生命周期。强行保留会导致模板加载失败、document.querySelector('link[rel="import"]').import 返回 null、自定义元素初始化中断。
替代方案只有两条路：构建时合并，或运行时fetch()注入。前者适合静态站点和 CI/CD 流程可控的项目；后者适合需动态更新局部内容（如用户登录态 banner）的场景。
Webpack 构建时拆分 HTML 模板，关键在html-webpack-plugin + html-loader 配置
不是简单把header.html扔进src/就完事。默认html-webpack-plugin只处理入口index.html，其他片段不会自动识别。
- 安装
html-loader并配置 rule：{ test: /\.html$/i, loader: "html-loader", options: { sources: false } }，否则require('./header.html')会报错 - 在主模板中用
（EJS）或${require('./header.html')}（如果用 html-webpack-plugin 的 interpolate 选项） - 确保所有子模板纯 HTML 片段，不含
、等顶层标签，否则构建后会出现嵌套 - 变量注入要统一前缀，比如
在入口传入，子模板里不能擅自改名，否则构建时报ReferenceError
运行时用fetch()加载 HTML 片段，必须处理<template></template>和脚本执行隔离
直接element.innerHTML = htmlString看似简单，但会触发内联<script></script>立即执行、样式重复注入、事件监听器丢失——尤其当同一片段被多次加载时。
立即学习“前端免费学习笔记（深入）”；
- 优先用
<template></template>包裹外部 HTML 内容，服务端返回的nav.html应以<template><nav>...</nav></template>结构封装 - 加载后用
template.content.cloneNode(true)插入，避免原<template></template>被污染 - 内联脚本（如
<script>initNav();</script>）不会自动执行，需手动eval()或创建<script></script>节点并appendChild，但更推荐将逻辑抽离到独立 JS 模块中按需import() - CSS 重复问题：若
nav.html含<style></style>，每次加载都会插入新<style></style>标签，建议提取为全局 CSS 文件，HTML 片段只留结构
组件化命名必须收敛到单一约定，否则art-template多层继承会覆盖失效
在layout.art里定义{{block 'content'}}，子模板page.art也写{{block 'content'}}，结果是 layout 的 block 完全不可见——art-template 只认最后一层同名 block。
- 按“区域+职责”命名，例如
'header-main-nav'、'main-article-body'、'sidebar-ads-slot'，禁止泛用'content'、'body' - 所有 block 名集中维护在
blocks.json里，CI 流程跑校验脚本：grep -r "{{block '" src/ | awk -F"'" '{print $2}' | sort | uniq -d - 继承层级控制在两层以内：layout → page，避免 layout → inner → feature → detail 这种结构，编译缓存命中率会掉 40% 以上
真正难的不是拆，而是让每个拆出来的部分能独立测试、不依赖全局状态、样式不泄漏——这些靠命名约束和构建检查比靠文档更管用。
