HTML模块化需代码拆分支撑，核心是作用域隔离、可识别性与可组合性；Web Components提供原生方案但需兼容处理；构建工具为工程化必要条件。
HTML模块化本身不依赖代码拆分，但实际项目中两者常被一起使用——因为光把HTML“拆开”没用，得让浏览器按需加载、不重复执行、不污染全局作用域。
HTML模块化 ≠ 把文件切小了就完事
很多人以为把 header.html、footer.html 单独存成文件就是模块化，其实这只是物理拆分。没有加载机制、无作用域隔离、无法复用逻辑，改一个 header 还得手动同步到十几个页面里，反而更难维护。
真正起效的模块化必须满足三点：
- 有明确边界：比如用
data-component="header"标识作用域，而不是只靠class="header" - 能被其他层识别：JS 能精准查到它，CSS 不会意外覆盖它，构建工具能把它当独立单元处理
- 可组合可替换：同一个
page-header组件，在后台页和前台页可以传不同title属性，而不用写两套 HTML
代码拆分是模块化落地的关键支撑
ES6 模块（import/export）和动态 import() 是目前最直接的代码拆分手段。它让模块化从“结构上可拆”变成“运行时可按需加载”。
立即学习“前端免费学习笔记（深入）”；
例如你有个用户中心模块：
// user-profile.js
export function renderProfile(data) {
return `<section data-component="user-profile"><h2>${data.name}</h2></section>`;
}
在需要时才加载它：
if (window.location.pathname === '/profile') {
import('./user-profile.js').then(mod => mod.renderProfile({ name: 'Alice' }));
}
这样做的实际效果：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 首页不加载用户中心逻辑，JS 包体积减少
-
user-profile.js里的变量不会泄漏到全局 - 构建工具（如 Vite）自动把它打成独立 chunk，配合
<link rel="prefetch">还能预加载
Web Components 是 HTML 原生模块化的可行路径
如果你不想依赖构建工具，customElements.define() 提供了 HTML 层面的模块封装能力。
注意几个容易踩的坑：
- 自定义标签名必须含短横线（
my-header✅，header❌），否则浏览器不认 -
connectedCallback里不能直接操作外部 DOM，它只负责自己内部结构 - 样式默认不继承，要用
:host或shadowRoot显式控制作用域 - IE 和旧版 Safari 不支持，必须加 polyfill 或降级方案
一个最小可用示例：
class MyHeader extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>h1 { color: #333; }</style>
<h1><slot></slot></h1>
`;
}
}
customElements.define('my-header', MyHeader);
然后在任意 HTML 中用：<my-header>Dashboard</my-header>
构建工具不是可选项，而是模块化工程化的必要条件
纯原生方案（如 <script type="module">）在开发阶段够用，但上线前必须过构建流程——否则没法做 tree-shaking、没法提取公共 chunk、没法压缩内联关键 CSS。
Vite 和 Webpack 的差异点很实在：
- Vite 开发时直接走原生 ES 模块，热更新快；打包时仍会生成
chunk文件，支持dynamic import自动分割 - Webpack 需配置
splitChunks才能提取公共模块，否则每个入口都打包一份lodash - 两者都要求你在 HTML 中用
<script type="module">加载主入口，否则模块语法会报错
最容易被忽略的是：模块化之后，HTML 文件本身也该变“薄”。它不该再塞满内联 JS 或冗余 <script> 标签，而应只保留骨架和占位符，其余交由模块按需注入。
