删除前需确认未被使用；90%的{{或{%注释是模板生成器遗留的摆设，非构建开关，浏览器和Webpack默认不解析，仅干扰grep与协作。
删之前先确认它真没被用
很多人一上来就全局搜 {{ 或 <!-- 狂删，结果上线后导航栏消失、表单验证失效。冗余代码不是“看起来没用”就能删，得验证是否被 JS 或构建流程实际消费。
- 打开开发者工具 → Elements 面板，用 Ctrl+F 搜
class="xxx"或id="yyy"，确认对应元素是否存在 - 切到 Sources 面板，全局搜索该 class/id，看是否有
document.querySelector、getElementsByClassName或事件监听（如el.addEventListener('click', ...)）调用它 - 特别注意
DOMContentLoaded回调里层层嵌套的if (false)或if (window.DEBUG)分支——这些代码可能没执行，但 JS 引擎仍会解析、绑定事件
别信注释，只信 DOM 结构
<!-- START: hero-section --> 这类区块注释，90% 是模板生成器留下的摆设，不是构建开关。浏览器不解析它，构建工具（如 Webpack）默认也不识别，留着只会干扰 grep 和团队协作。
- 搜索全部模板语法：
{{、{%、、<code>@@include，连同对应结束符（如}}、%}）一并删除 - 删掉所有形如
<!-- START: xxx -->/<!-- END: xxx -->的成对注释——除非你明确配置了构建时条件注入（比如 gulp-inject），否则它们只是视觉噪音 - 保留的注释仅限两类：
<!--[if IE]>条件注释（已淘汰，也该删）和真正指导构建的标记，例如<!-- build:css -->（需配套构建插件才生效）
空格和换行不是“格式问题”，是体积问题
一个 100KB 的 HTML 文件，平均有 12–15KB 是空格与空行。它们不报错，但拖慢首字节时间、增加传输开销、干扰覆盖率分析。
- 编辑器里选中全文，按
Shift+Tab左对齐，再手动删掉开头/结尾多余空行 - 避免在标签间写多行缩进：
<div>\n <p>text</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a> <p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>\n</div>→ 改成<div> <p>text</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div>（压缩工具能处理，但手写阶段就精简更省心） - 用
html-minifier时必开collapseWhitespace: true+conservativeCollapse: true，否则<pre class="brush:php;toolbar:false;"></pre>和<textarea></textarea>里的换行会被吃掉
语义化不是加分项，是删代码的前提
当你用 <div class="float-left clear-both"> 布局时，其实已经给自己埋了三处冗余：class 名含样式描述、依赖浮动、需要清除浮动。换成语义化结构，很多 class 和 hack 就自然消失了。<ul><li>把 <code><table class="layout-grid"> 替换为 <code><div style="display: grid;">，删掉整张无数据、无 caption、无 thead 的表格<li>用 <code><header></header>、<nav></nav>、<main></main> 替代一堆 <div id="top-bar">、<code><div class="nav-wrap">，CSS 选择器从 <code>div#top-bar ul li a 缩减为 nav a
style="color:red; font-size:14px;" 必须外移——它无法缓存，且 html-minifier 默认不压缩内联 style 字符串真实项目里，最常被忽略的是“删完之后没回归测试”。哪怕只是静态页，也建议用 Puppeteer 快速跑一遍：加载页面 → 检查关键元素 textContent 是否存在 → 触发主要按钮看控制台有无报错。删代码比写代码风险更高，动作越小，验证越要实。
