HTML组件化开发中，代码拆分不是“要不要做”的问题，而是“怎么拆才不拖慢首屏、不引发内存泄漏、不被浏览器静默忽略”的实操问题。
动态 import() 是当前最可靠按需加载手段
它被所有现代浏览器原生支持（Chrome 63+、Firefox 67+、Safari 11.1+），且构建工具（Vite/Rollup/Webpack）能自动识别并打成独立 chunk。关键在于触发时机和错误兜底：
- 别在模块顶层直接写
import('./dialog.js')——这会变成静态导入，失去按需意义；必须包裹在函数或事件回调里 - 加载失败时，
catch()必须显式处理，否则白屏或控制台静默报错：import('./card.js').catch(() => { el.innerHTML = '<div class="error">加载失败</div>'; }) - 避免在
connectedCallback中无条件调用import()：Custom Element 可能被反复创建/销毁，导致重复请求或竞态
fetch() + insertAdjacentHTML() 适合纯 HTML 片段模块化
当组件只是结构+样式、不含复杂逻辑（如 header、sidebar、banner），用 fetch() 加载 HTML 字符串比 JS 模块更轻量，也绕过 CSP 对 eval 类动态执行的限制：
- 永远用
insertAdjacentHTML('beforeend', html)替代innerHTML，避免意外执行内联<script>标签 - URL 路径以入口 HTML 所在目录为基准，不是当前 JS 文件位置；
import.meta.url可用于构造绝对路径：fetch(new URL('./footer.html', import.meta.url)) - 重复加载同一片段时，加
cache: 'force-cache'或手动加时间戳参数，否则开发环境下可能拿到 stale response
构建时内联（如 rollup-plugin-html）是零运行时风险的选择
适用于内容稳定、无需运行时更新的组件（如全局 header、copyright）。它把 <include src="header.html"> 在打包阶段展开，最终输出仍是单个 HTML 文件：
立即学习“前端免费学习笔记（深入）”；
- 不依赖浏览器特性，兼容 IE11（只要构建后没用到 ES6+ 语法）
- 路径解析明确：
src始终相对于入口 HTML 文件，不会因 JS 模块位置变化而失效 - 不支持传参，所以带变量的组件（如
<card title="xxx">）必须改用模板引擎或升级为 Custom Element - 注意：若 header.html 里有相对路径的 CSS/JS，构建工具默认不会重写，需额外配置
resolvePaths或统一用根路径
真正容易被忽略的是资源生命周期——哪怕用了最“模块化”的方式，Custom Element 实例被移除时，如果没在 disconnectedCallback 里清理 IntersectionObserver、定时器或事件监听器，内存泄漏会比 jQuery 时代更难排查。
