使用构建工具如Webpack、Vite进行依赖分析与去重，通过配置插件和splitChunks策略合并CSS；2. 动态加载时检查link标签是否已存在，避免重复插入；3. 统一在主入口文件引入样式，集中管理依赖路径；4. 合理设置浏览器缓存与内容哈希，减少重复请求。核心是构建去重、运行时控制与缓存优化结合。
避免重复加载相同的CSS文件，关键在于合理的依赖管理和资源加载策略。直接在页面中多次引入同一个CSS文件不仅浪费带宽，还可能引发样式冲突或覆盖问题。以下是几种实用的解决方案。
1. 使用构建工具进行依赖去重
现代前端项目普遍使用构建工具（如Webpack、Vite、Rollup）来管理资源依赖。这些工具能自动分析模块间的依赖关系，确保每个CSS文件只被引入一次。
- Webpack通过css-loader和MiniCssExtractPlugin提取并合并CSS，避免重复打包。
- Vite利用原生ES模块机制，在开发阶段就能识别重复导入，并在生产构建时自动去重。
- 配置splitChunks策略可将公共CSS抽离成独立文件，供多个页面共享。
2. 动态加载与判断已加载状态
在运行时动态插入CSS链接时，应先检查是否已存在相同路径的link标签，防止重复请求。
function loadCSS(href) {
if (document.querySelector(`link[href="${href}"]`)) return;
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}
这种方式适合插件化系统或按需加载场景，简单有效。
立即学习“前端免费学习笔记（深入）”；
3. 统一入口管理样式依赖
集中管理CSS引入路径，避免散落在各个HTML文件中各自引用。
- 在主JS文件中统一import所需CSS：import './styles/global.css';
- 使用Sass/Less的@import或PostCSS的@import插件，在编译阶段合并样式文件。
- 维护一个manifest.json记录已加载资源，在多页面应用中协调依赖。
4. 利用浏览器缓存机制
即使文件被多次引用，合理设置HTTP缓存头也能减少实际网络请求。
- 为CSS文件配置长期缓存（如Cache-Control: max-age=31536000）。
- 配合内容哈希命名（style.[hash].css），更新后自动失效旧缓存。
虽然不能完全避免HTML中的重复link标签，但能显著降低性能影响。
基本上就这些。核心思路是：构建阶段去重 + 运行时控制 + 缓存优化。只要做好依赖治理，重复加载问题很容易解决。
