link rel="stylesheet" 在 head 中仍是全局加载，因其解析即阻塞渲染；局部加载需构建时按页面拆包或运行时动态增删带唯一ID的link标签，并配合CSS Modules等实现样式隔离。
为什么 link rel="stylesheet" 放在
因为浏览器解析 HTML 时，只要遇到 <link rel="stylesheet">，就会立即发起请求并阻塞渲染——不管它写在哪个页面的 里。所谓“局部引入”，本质不是靠 HTML 标签位置决定的，而是靠构建流程或运行时逻辑控制是否插入该标签。
- 静态 HTML 中硬编码的
<link>没有“局部”概念，它对所有加载它的页面生效 - 真正实现局部加载，得让这个
<link>只在目标页面的 DOM 中存在（比如 SSR 注入、前端路由守卫动态 append、或构建时按页面拆包） - 直接在某个 HTML 文件里写
<link href="/page-a.css">，但又把该文件用作多个页面模板，那它就一定会被复用
Webpack/Vite 项目中怎么让 CSS 只打包进特定页面？
关键不是“引入方式”，而是“代码分割边界”是否切在页面级。默认情况下，import './page-a.css' 会跟着 JS 模块走，而 JS 模块若被多个页面引用，CSS 就会被打进公共 chunk。
- 确保 CSS 文件只被一个异步页面模块（如
page-a.tsx）直接import，且该模块没有被其他入口引用 - Vite 用户：启用
build.rollupOptions.output.manualChunks并按页面命名分块，CSS 会随 JS 自动归入对应 chunk - Webpack 用户：配合
mini-css-extract-plugin，并设置splitChunks.chunks: 'async'，避免 CSS 被提取到vendor或common - 注意
@import在 CSS 文件里会破坏分割，改用 JS 层级的import
React/Vue 单页应用里如何运行时按需加载 CSS？
适用于路由切换后才需要某套样式的场景，比如后台不同业务模块样式完全隔离。这时候不能靠构建时拆包，得靠 JS 控制 <link> 的增删。
- 用
useEffect（React）或onMounted（Vue）在组件挂载时动态创建<link>标签并 append 到document.head - 务必在组件卸载时 remove 对应
<link>，否则样式残留、重复插入、甚至 FOUC（闪屏）都可能出现 - 给
<link>加唯一id（如id="css-page-a"），方便精准查找和移除 - 不要用
fetch + insertRule解析 CSS 文本——兼容性差、无缓存、无法利用浏览器原生 CSSOM 优化
常见错误：CSS 局部加载后没生效或干扰了其他页面
问题往往不出在“有没有加载”，而出在“作用域是否真的隔离”。CSS 天然全局，哪怕文件是分开的，选择器照样能跨页面匹配。
立即学习“前端免费学习笔记（深入）”；
-
.btn { color: red }这种通用类名，在任何页面都生效，跟文件是否局部无关 - 没启用 CSS Modules 或 CSS-in-JS，又没加 BEM/命名空间，局部 CSS 文件里的规则仍会污染全局样式表
- 动态插入的
<link>如果没加media="print"或disabled控制，可能在 DOM 中长期存在，下次路由复用时直接生效 - 服务端渲染（SSR）场景下，若只在客户端插入 CSS，首屏会漏样式，必须同步在服务端注入
<link>标签
局部加载 CSS 不难，难的是让它的作用域真·局部——文件拆开了，样式却还粘着全局，这才是最常被忽略的一层。
