最可控方式是统一用<link rel="stylesheet">引入相同URL的CSS，浏览器会自动去重缓存；需确保路径绝对一致、禁用@import、配置Cache-Control，并避免HTML手动引入与JS动态导入重复。
直接在每个页面的 <head> 里用 <link rel="stylesheet"> 引入自己需要的 CSS，是最可控、最不容易出错的方式。构建工具能帮你合并公共部分，但前提是路径一致、顺序合理、不滥用 @import。
怎么让多个页面共用一份 CSS 却只加载一次？
浏览器对相同 URL 的 CSS 有强缓存和样式表去重机制——前提是 URL 字符串完全一样。
- 确保所有页面引入的公共 CSS 路径统一，比如都用
/css/shared.css（根相对路径），而不是./css/shared.css或../css/shared.css - 避免动态参数：
/css/shared.css?v=123和/css/shared.css?v=456会被视为两个资源，强制刷新缓存 - 服务端响应头要配好
Cache-Control: public, max-age=31536000，尤其对带 hash 的文件（如shared.abc123.css） - 开发时别开着 DevTools 的 “Disable cache”，否则测不出真实缓存行为
为什么不能在 CSS 里用 @import 引公共样式？
@import 是串行阻塞加载，会拖慢首屏渲染，且无法被浏览器缓存复用或构建工具有效归并。
- 写在
page-a.css开头的@import 'shared.css';，会让浏览器先请求page-a.css，解析到这一行再发第二次请求，形成链式等待 - 它不支持
media属性（比如@import 'print.css' screen and (max-width: 768px)'是无效的） - 真正要用，仅限预处理器（Sass/Less）编译期导入，或组件级 CSS 内部强依赖的工具文件（如
mixins.css），且必须放在文件最开头、同域、无条件 - 上线产物中绝不能出现
@import—— 构建阶段就得把它展开、合并、压缩
Vite / Webpack 多入口下如何避免生成重复的 CSS 文件？
默认配置容易让每个 HTML 入口各自提取一份 main.css，哪怕内容一模一样，也会产出多个物理文件并被多次引入。
立即学习“前端免费学习笔记（深入）”；
- Vite：关掉自动拆分干扰，用
manualChunks显式提取样式，例如：output: { manualChunks: { styles: [/\.css$/] } } - Webpack：禁用多入口各自实例化
MiniCssExtractPlugin，改用splitChunks.cacheGroups归并，把normalize.css这类通用依赖单独抽成vendor.css - 关键点：所有 JS 入口里对同一份 CSS 的
import '@/styles/shared.css'必须路径一致，否则构建工具无法识别为同一模块 - 别在 HTML 中手动加
<link>的同时，又在 JS 中import同一个 CSS —— 会导致样式注入两次
动态加载 CSS 时最容易忽略的两个问题
用 JavaScript 插入 <link> 实现按需，看似灵活，实则容易触发 FOUC（白屏闪动）或重复加载。
- 插入后必须监听
link.onload，等样式加载完成再操作 DOM，比如：link.onload = () => renderModal();
- 用
Set缓存已加载的 URL：if (!loadedCSS.has(href)) { loadCSS(href); loadedCSS.add(href); } - 不要在每次点击都重新创建
<link>标签——即使已存在，也要检查document.querySelector('link[href="' + href + '"]')是否已挂载 - 内联
<style>标签无法被缓存，SSR 或模板引擎中慎用，除非是极小量、强页面绑定的样式
真正难的不是“怎么引”，而是让所有人遵守同一套路径规范、加载顺序和构建配置。一旦某个页面偷偷在 <head> 里手写了一段按钮样式，或者某次构建漏掉了 manualChunks 配置，重复加载和样式冲突就会立刻浮现。
