HTML组件体积优化核心是人为约束资源引入方式而非依赖构建工具分析，需外链公共样式、统一模块化脚本、禁用base64图标、确保第三方库单次加载、模板ID唯一克隆。
HTML组件本身不支持“打包”，所谓体积优化，核心是控制内联、避免重复、拆分外链——不是让构建工具去分析组件依赖，而是人为约束资源引入方式。
为什么直接写<my-card>会导致HTML文件暴涨
常见现象：一个含 5 个 <my-card> 的页面，HTML 文件从 8KB 涨到 120KB。这不是因为组件逻辑复杂，而是：
• 每个组件都 copy-paste 了相同的 <style> 和初始化 <script>
• SVG 图标用 base64 写死在 HTML 里，单个占 4KB，复用 5 次就是 20KB
• 第三方库（如 lit 或 hyperhtml）被多个 <script src="..."> 重复加载，且没统一 CDN 版本
• <template> 块未做去重，每个组件都带一份完整结构
压缩 HTML 本身不能解决组件体积问题
用 html-minifier-terser 压缩 HTML 只能移除空格、注释、冗余属性，对体积影响有限（通常压缩率 10–20%），但掩盖了真正的问题：
• <style> 和 <script> 内联在 HTML 中，无法被浏览器缓存
• 多个组件共用的 JS/CSS 代码被重复嵌入，压缩后仍是多份
• collapseWhitespace: true 会把 <div>hello</div><span>world</span> 变成 <div>hello</div><span>world</span>，但中间那个空格如果原本是渲染所需，就可能错位
• removeEmptyAttributes: true 会删掉 class="" 或 data-id=""，而 JS 可能依赖这些空属性做条件判断
真正有效的组件体积控制策略
组件化 HTML 项目的体积瓶颈不在“怎么压缩”，而在“怎么组织”：
• 所有公共样式提取为外链 <link rel="stylesheet" href="/shared.css">，禁止在每个组件里写 <style>
• 组件脚本统一由一个 <script type="module"> 加载，用 import 拆分逻辑，而非反复 <script>customElements.define(...)</script>
• 图标全部改用 <svg> 外链或系统字体图标，禁用 base64 内联
• 使用 importmap 或 Webpack 的 externals 配置，确保 lit、react 等基础库只加载一次
• 对于必须内联的模板片段（如 <template id="card-tpl">），用 ID 唯一标识，JS 运行时只克隆一次，不要每个组件都复制一份
立即学习“前端免费学习笔记（深入）”；
最常被忽略的一点：HTML 压缩和组件拆分是两件事。你可以在 html-webpack-plugin 里配好 minify，但如果不先解决内联和重复问题，压缩只是给臃肿包打薄薄一层马赛克。
