HTML组件化项目中的资源打包策略：减小组件依赖体积

HTML组件化项目不支持组件化打包，体积膨胀主因是内联资源重复与缺乏依赖管理；应通过外链JS/CSS、CDN引入基础库、importmap或externals去重优化。

HTML组件化项目本身不支持“组件化打包”这个概念——它没有模块系统、没有 import/export、没有构建时依赖分析，所谓“减少组件依赖体积”，本质是控制内联资源 + 合理拆分外部引用。

为什么直接在HTML里写组件会膨胀得飞快

常见现象：一个含 5 个自定义 <my-card>、3 个 <my-modal> 的页面，HTML 文件从 8KB 涨到 120KB，打开变慢、首屏渲染卡顿。

根本原因不是组件逻辑多，而是：

• 每个组件都重复内联了相同的 <style> 和 <script> 片段（比如都 copy-paste 了一份 Shadow DOM 初始化代码）
• 图标用 base64 写死在 HTML 里，单个 SVG 就占 4KB，5 处复用就是 20KB
• 第三方工具（如 lit-html 或 hyperhtml）被多次 <script src="..."> 引入，且没做版本/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> 内联，改用 adoptedStyleSheets 或 fetch() 动态注入 CSS（避免阻塞解析）
• 公共基础库（如 lit、solid-js）走 CDN，并配 externals（Webpack）或 importmap（原生）

例如，在 index.html 顶部加：

<script type="importmap">{  "imports": {    "lit": "https://cdn.jsdelivr.net/npm/[email protected]/+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 更治本。