精简前先做三件事
不要凭感觉删代码。先打开构建工具的体积报告，找出占比最大的文件；再用浏览器 Coverage 面板查看 CSS/JS 实际使用率；最后列出模板中重复出现的结构。有了数据再动手，避免误删关键样式。
HTML：去掉“万能容器”
模板常见问题是多层无语义嵌套。一个卡片常常被包了四五层 div，每层只承担一个类名。
合并可合并的层级
能用 flex 或 grid 直接排布的，不必额外加壳。例如父级 div.card 已经控制布局，中间 div.card-body 仅作背景色，就可以把背景色移到父级或用伪元素实现。
用语义标签替代类名堆叠
header、nav、main、aside、footer 本身即结构，无需再写 class="header-wrap"。语义标签可读性更强，也减少类名冲突。
CSS：砍掉三类冗余
清理未使用选择器
Coverage 面板会标出从未命中的规则。先备份，再删除纯展示类，注意保留动态添加的类名，如 .is-active、.show。
合并重复声明
同一个颜色值在多个选择器重复时，用 CSS 变量收敛。例如 --c-primary: #1a73e8;，后续只改一处。间距、字号同理。
降低选择器权重
避免 div.container > ul li a.link 这类深链。改成 .link 或 .nav-link 单类选择，浏览器匹配更快，也更容易复用。
JS：延迟非关键逻辑
模板常把轮播、弹窗、统计脚本全部同步引入，阻塞首屏。
- 非首屏组件用
IntersectionObserver懒加载初始化。 - 第三方库优先选体积更小的替代，例如用原生
dialog替代弹窗插件。 - 事件绑定使用委托，减少重复监听。
内联资源与图片
图标字体往往只用了几个字形，改为内联 SVG，体积可降一个量级。小图转 base64 要控制阈值，超过 4KB 反而损害缓存。模板中的背景图建议用 image-set 或 srcset 按需加载。
建立防回归机制
精简不是一次性工作。在构建流程中加入体积阈值告警，超过设定值即失败；提交前跑一遍未使用 CSS 检测。把“代码体积”纳入 review 清单，才能避免模板再次膨胀。
