grep -r "rel=\"stylesheet\"" src/ --include="*.html" | sort | uniq -c | sort -nr 可快速识别重复的 标签，对硬编码冗余敏感，但需人工确认 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="/>%20%E6%8E%A7%E5%88%B6%E8%A7%A3%E6%9E%90%E5%9F%BA%E5%87%86%EF%BC%8C%E5%86%8D%E7%94%A8%20Python%20%E8%84%9A%E6%9C%AC%E8%B0%83%E7%94%A8%20urllib.parse.urljoin()%20%E5%BD%92%E4%B8%80%E5%8C%96%E6%89%80%E6%9C%89%20href%20%E5%80%BC%EF%BC%8C%E6%9C%80%E5%90%8E%E6%AF%94%E5%AF%B9%E5%BD%92%E4%B8%80%E5%8C%96%E5%90%8E%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E3%80%82
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
%E5%A6%82%E4%BD%95%E8%AF%86%E5%88%AB%E8%A2%AB%E5%A4%9A%E6%AC%A1%20@import%20%E7%9A%84%20CSS%20%E6%96%87%E4%BB%B6
%0AHTML%20%E9%87%8C%E7%9C%8B%E4%B8%8D%E5%88%B0%20@import%EF%BC%8C%E4%BD%86%E5%AE%83%E8%97%8F%E5%9C%A8%E5%B7%B2%E5%BC%95%E5%85%A5%E7%9A%84%20CSS%20%E6%96%87%E4%BB%B6%E9%87%8C%E3%80%82%E5%BF%85%E9%A1%BB%E9%80%92%E5%BD%92%E6%89%AB%E6%8F%8F%EF%BC%9A%E5%85%88%E6%8F%90%E5%8F%96%E6%89%80%E6%9C%89%20<link>%20%E7%9A%84%20href%EF%BC%8C%E5%86%8D%E5%AF%B9%E6%AF%8F%E4%B8%AA%20CSS%20%E6%96%87%E4%BB%B6%E6%89%A7%E8%A1%8C%20grep%20-o%20" main.css>。重点盯两类情况：
- 多个 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 请求，再反查源码。这类动态加载往往没做去重逻辑，同一脚本被多次执行就触发多次插入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
