HTML组件化项目不支持组件化打包，体积膨胀主因是内联资源重复与缺乏依赖管理；应通过外链JS/CSS、CDN引入基础库、importmap或externals去重优化。
HTML组件化项目本身不支持“组件化打包”这个概念——它没有模块系统、没有 import/export、没有构建时依赖分析，所谓“减少组件依赖体积”，本质是控制内联资源 + 合理拆分外部引用。
为什么直接在HTML里写组件会膨胀得飞快
常见现象：一个含 5 个自定义 <my-card></my-card>、3 个 <my-modal></my-modal> 的页面，HTML 文件从 8KB 涨到 120KB，打开变慢、首屏渲染卡顿。
根本原因不是组件逻辑多，而是：
- 每个组件都重复内联了相同的
<style></style>和<script></script>片段（比如都 copy-paste 了一份 Shadow DOM 初始化代码） - 图标用 base64 写死在 HTML 里，单个 SVG 就占 4KB，5 处复用就是 20KB
- 第三方工具（如
lit-html或hyperhtml）被多次<script src="..."></script>引入，且没做版本/CDN 统一
用 html-webpack-plugin + html-minifier-terser 压缩 HTML 本身
这不是“打包组件”，而是把 HTML 当作源文件来精简。关键点在于：只压缩，不改变执行逻辑。
配置示例（vue.config.js 或 Webpack 配置中）：
new HtmlWebpackPlugin({
template: 'src/index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
minifyJS: true,
minifyCSS: true,
// 注意：不要开 removeEmptyAttributes，否则 custom element 的空属性（如 disabled）可能被误删
}
})
容易踩的坑：
-
collapseWhitespace: true会把<div> hello </div>变成<div>hello</div>，如果组件依赖文本节点位置（比如用childNodes[0].textContent取值），会出错 -
removeScriptTypeAttributes对现代浏览器安全，但若你还在用 IE11 且 script 里有type="module"，删掉后会降级失败
把组件 JS/CSS 提取为外部文件，禁用内联
HTML 组件化 ≠ 所有代码塞进一个 HTML。真正可控的体积优化，是从“全内联”转向“按需外链”。
正确做法：
- 所有组件逻辑抽成独立
.js文件，统一放在/components/下，用<script type="module">import './card.js'</script>加载 - 组件样式不再用
<style></style>内联，改用adoptedStyleSheets或fetch()动态注入 CSS（避免阻塞解析） - 公共基础库（如
lit、solid-js）走 CDN，并配externals（Webpack）或importmap（原生）
例如，在 index.html 顶部加：
<script type="importmap">
{
"imports": {
"lit": "https://cdn.jsdelivr.net/npm/lit@3.1.4/+esm"
}
}
</script>
这样，组件内部写 import { html, LitElement } from 'lit'; 就不会被打包进你的 bundle，体积自然下来。
别忽略 importmap 的兼容性代价
importmap 看似完美解决依赖外链，但它在 Safari 16.4 之前、所有 Android WebView、旧版 Edge 中完全不可用。
如果你必须支持这些环境，就得 fallback 到传统方式：
- 用
webpack+externals构建一个轻量 bundle，再配合<script src="vendor.js"></script>手动挂载 - 或者用
esbuild构建多个入口，生成card.min.js、modal.min.js等独立文件，按需加载
最常被忽略的一点：HTML 组件化项目的“体积问题”，往往不是代码本身大，而是缺乏统一的资源注册与去重机制。同一个 utils.js 被 10 个组件各自 fetch 一次，就等于多传了 10 次。解决它，比压缩 HTML 更治本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
