grep -r "rel=\"stylesheet\"" src/ --include="*.html" | sort | uniq -c | sort -nr 可快速识别重复的 <link rel="stylesheet"> 标签，对硬编码冗余敏感，但需人工确认 CDN 域名差异及路径写法等价性，并配合 base 标签与 URL 归一化处理 href 变体。
怎么用 grep 快速揪出重复的 <link rel="stylesheet"> 标签
直接在项目根目录跑一条命令就能筛出高频重复引入：grep -r "rel=\"stylesheet\"" src/ --include="*.html" | sort | uniq -c | sort -nr。它不解析 HTML 结构，但对「同一 CSS 路径被多次写死」这种硬编码冗余极其敏感。常见误报点是不同环境（dev/prod）用了不同 CDN 域名，比如 cdn-a.example.com/app.css 和 cdn-b.example.com/app.css 会被当成两个资源——得靠后续人工确认是否语义等价。
为什么 href 相同但路径写法不同也算冗余
浏览器加载时，/css/main.css、./css/main.css、css/main.css（当前页在 /css/ 下）最终都指向同一个文件，但静态扫描会认为它们是三个独立引用。这类问题在多层嵌套模板中高发：
-
<link href="styles.css" rel="stylesheet">（在/pages/a.html中） -
<link href="../styles.css" rel="stylesheet">（在/pages/b/c.html中）
解决方案不是改 HTML，而是统一用 <base href="/> 控制解析基准，再用 Python 脚本调用 urllib.parse.urljoin() 归一化所有 href 值，最后比对归一化后的字符串。
如何识别被多次 @import 的 CSS 文件
HTML 里看不到 @import，但它藏在已引入的 CSS 文件里。必须递归扫描：先提取所有 <link> 的 href，再对每个 CSS 文件执行 grep -o "@import[^;]*;" main.css。重点盯两类情况：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 多个 CSS 文件都
@import "reset.css"→ 实际加载了 N 次 reset.css - 某 CSS 文件里
@import "theme/dark.css"; @import "theme/light.css"→ 同一页面可能同时加载两套冲突主题
注意：CSS 中的 @import 是阻塞式加载，重复引入不仅冗余，还会拖慢渲染。
真正难发现的是通过 JS 动态插入的重复样式
像 document.head.appendChild(Object.assign(document.createElement('link'), { rel: 'stylesheet', href: '/common.css' })) 这类代码，grep 和 HTML 解析器都抓不到。必须结合 Chrome DevTools 的 Network 面板，筛选 Initiator 列为 other 或具体 JS 文件名的 main.css 请求，再反查源码。这类动态加载往往没做去重逻辑，同一脚本被多次执行就触发多次插入。
