style.css 有 380KB,用覆盖率面板跑一遍首页只用到 41%,剩下的选择器都是从老主题继承下来的,首屏渲染被多拖了 200ms。日志里能对上时间点,这种反而好排。
主题迭代几年,废弃模块的样式没人删,框架的整包 CSS 也被原样引进来。浏览器要解析全部规则才渲染,没命中的部分同样花时间。这一点先确认清楚,后面就不用反复试。
npx purgecss --css style.css \ --content '**/*.php' '**/*.js' \ --output dist/
这次卡住的地方就在「CSS 未使用样式」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。
处理上按这个顺序:先用覆盖率面板确认哪些规则真没用到 别凭文件名判断;构建时接 PurgeCSS 把 content 指向模板和脚本 白名单留给动态拼接的类名;产物上线前在几个主要页面各点一遍 确认没有样式丢失。
结果对不对很好判断,样式表降到 160KB 左右,首页样式和改之前一致,抽查三个内页没有掉样式。
