HTML体积治理核心在于控制内联内容与外部引用方式，而非单纯压缩；盲目启用html-webpack-plugin的minify选项如collapseWhitespace或removeEmptyAttributes会破坏DOM语义和运行时行为。
HTML 本身不参与 webpack 打包流程，所谓“HTML 打包体积治理”其实是控制 HTML 文件内联内容 + 管理其对外部资源的引用方式。直接在 index.html 里塞 <script>、<style>、base64 图标或重复组件逻辑，才是体积失控的根源。
为什么 html-webpack-plugin 的 minify 配置容易出问题
它只做字符串级压缩，不理解 DOM 结构或组件语义，盲目启用某些选项会破坏运行时行为。
-
collapseWhitespace: true会抹掉文本节点间的空白，若组件依赖childNodes[0].textContent取值（比如解析模板中的换行缩进），结果为空字符串 -
removeEmptyAttributes: true会删掉<my-button disabled>中的disabled，导致自定义元素失去布尔属性语义 -
removeScriptTypeAttributes: true在 IE11 下会让<script type="module">降级为普通脚本，直接报错
如何把组件 JS/CSS 安全地抽成外链
HTML 组件化项目没有模块系统，但可以靠路径约定 + 构建时注入实现“伪按需加载”，关键不是“能不能拆”，而是“拆完会不会 404 或执行错序”。
- 所有组件逻辑统一放
/js/components/下，命名如my-card.js、my-modal.js - 用
html-webpack-plugin的templateParameters注入版本哈希，避免缓存失效：<script src="/js/components/my-card.js?v="></script> - CSS 必须用
<link rel="stylesheet">，不能内联；Shadow DOM 中的样式要靠adoptedStyleSheets注入，而非<style>标签
CDN + importmap 是目前最轻量的第三方库治理方案
Webpack 的 externals 对纯 HTML 项目无效，而 importmap 能让浏览器原生理解模块名映射，且不依赖构建工具。
立即学习“前端免费学习笔记（深入）”；
- 在
<head>中声明：<script type="importmap">{"imports":{"lit":"https://cdn.jsdelivr.net/npm/lit@3/+esm"}} - 组件内直接写
import { html, LitElement } from 'lit';，无需本地安装或打包 - 注意：Safari 16.4+、Chrome 115+、Firefox 117+ 才支持；旧版需 fallback 到
script src+ 全局变量检测
真正难的不是“怎么拆”，而是拆完后各组件对全局环境的隐式依赖——比如都读取 window.config，但加载顺序没约束；或者多个组件都注册了同名 customElements.define('my-button', ...) 导致冲突。这些不会体现在 bundle 分析报告里，却会让页面在某个随机时间点突然白屏。
