HTML导出前应在构建流程中集成html-minifier-terser和purgecss实现自动化压缩；前者精简HTML结构，后者清除无用CSS类，二者协同效果最佳。
HTML导出前怎么用工具压缩体积
直接在构建流程里加压缩，比手动删空格更可靠。主流方案就两个：html-minifier-terser（Node.js 环境）和 purgecss（配合 CSS 清理）。前者处理 HTML 结构本身，后者负责干掉没用的 CSS 类——两者叠加效果最明显。
-
html-minifier-terser默认会移除注释、空白符、冗余属性（比如type="text/javascript"），但removeAttributeQuotes和collapseWhitespace要显式打开才生效 - 别开
removeScriptTypeAttributes或removeStyleLinkTypeAttributes，现代浏览器虽支持省略，但某些旧版 WebView（比如 Android 4.4 内置）会解析失败 - 如果用了
data-属性做 JS 交互，确保customAttrSurround和customAttrAssign配置正确，否则可能把data-id="{{id}}"里的双大括号误删
压缩后体积没变小？先检查这些地方
常见假象是“开了压缩但文件大小纹丝不动”，大概率卡在三类问题上：源文件本身已压缩、构建缓存未清、或压缩配置被覆盖。
- 确认原始 HTML 是否来自 Webpack/Vite 输出目录（如
dist/index.html），而不是开发服务器内存中生成的版本——后者没走压缩插件 - Vite 用户注意：
build.minify默认只压 JS/CSS，HTML 压缩需额外装vite-plugin-html并配minify: true - Webpack 用户若用了
HtmlWebpackPlugin，得检查是否传了minify选项；设为true会用内置简易压缩，不如显式传对象精细控制 - 用
ls -lh dist/index.html对比前后大小，别只看编辑器右下角——有些编辑器显示的是未保存缓存值
怎么快速对比压缩前后的差异
光看字节数不够，得知道删了啥。用命令行 diff 最直接，避免肉眼扫。
- 先保留一份未压缩副本：
cp dist/index.html dist/index.unmin.html - 再运行压缩命令（如
npx html-minifier-terser --collapse-whitespace --remove-comments --minify-css true --minify-js true dist/index.unmin.html -o dist/index.html） - 用
diff -u dist/index.unmin.html dist/index.html | head -n 20快速看前 20 行变化，重点找删掉的空行、
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
