CSS局部引入策略_仅在特定页面加载相关CSS文件

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 不难，难的是让它的作用域真·局部——文件拆开了，样式却还粘着全局，这才是最常被忽略的一层。