Webpack 中 css-loader 与 style-loader 默认不处理 CSS 重复引入，因模块缓存仅对 JS 生效；启用 style-loader 的 injectType: 'singleton' 可强制共享同一 标签，实现单例注入。
Webpack 中 css-loader 与 style-loader 默认不处理 CSS 文件重复引入
即使同一份 index.css 被多个模块通过 import './index.css' 引入，Webpack 仍会将其打包多次——不是因为 loader 有 bug，而是设计如此：css-loader 只负责解析 @import 和 url()，style-loader 只负责把 CSS 字符串插入 标签。它们不参与模块去重逻辑。
真正决定是否复用已加载模块的是 Webpack 的模块缓存机制（__webpack_require__.c），但它只对 JS 模块生效；CSS 作为资源模块，在默认配置下每次 import 都触发一次新的 pitch 阶段和样式注入。
- 现象：控制台出现多条
[HMR] Updated modules:后跟着重复的标签，或 DevTools Elements 面板里看到多个内容相同的 - 根本原因：CSS 模块未被标记为「单例」，也未启用
singleton模式 - 解决方向：改用
style-loader的injectType: 'singleton'，或统一收口到一个入口 CSS 文件中
使用 style-loader 的 singleton 模式强制 CSS 只注入一次
这是最直接、无需修改项目结构的方案。只需在 webpack.config.js 的 module.rules 中为 style-loader 添加配置：
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
injectType: 'singleton'
}
},
'css-loader'
]
}
该模式会让所有匹配的 CSS 模块共享同一个 标签，后续引入仅更新其 textContent，而非新增标签。
- 注意：启用后，CSS 的 HMR（热更新）行为会变化——不再是替换整个
标签，而是 diff 内容后局部更新，更接近真实浏览器渲染流程 - 不兼容场景：若不同模块依赖同一 CSS 文件但期望隔离作用域（如微前端子应用），
singleton会导致样式污染，此时应改用 CSS Modules 或scoped方案 - 性能影响：减少 DOM 节点数量，降低首次渲染时的样式计算开销，尤其在大量组件共用基础样式时效果明显
Vite 中如何避免重复加载 —— 它默认就做了去重
Vite 在开发阶段用原生 ESM 加载 CSS，借助浏览器对相同 URL 的 自动去重能力，天然规避了重复加载问题。你写十次 import './base.css'，浏览器最终只发起一次请求、创建一个 标签。
但在生产构建（vite build）时，Vite 使用 esbuild + rollup 处理 CSS，行为取决于你是否启用 build.cssCodeSplit：
- 默认
true：CSS 按异步 chunk 拆分，可能造成同一份样式在多个 chunk 中重复出现（如chunk-A.css和chunk-B.css都含.btn） - 设为
false：所有 CSS 合并进一个style.css，彻底避免重复，但失去按需加载优势 - 推荐折中：保持
cssCodeSplit: true，配合build.rollupOptions.output.manualChunks显式提取公共样式，例如将src/assets/styles/*.css单独打成vendor.css
真正难处理的是 CSS-in-JS 或构建时内联的样式重复
比如用 styled-components 的 css 函数生成样式字符串，或用 PostCSS 插件把 @apply 展开为冗长类名，这些都不会被 Webpack/Vite 的模块系统识别为「同一资源」，也就无法靠路径去重。
这类重复往往藏在运行时：多个组件调用同一 css`...`，却各自注册独立的样式规则。
- 解法一：对稳定不变的样式块做 memoization，例如
const buttonStyle = css`...`提升到模块顶层，而非组件内部重复定义 - 解法二：启用
styled-components的ssr: true+StyleSheetManager，服务端预计算样式 ID，客户端复用 - 关键提醒：这类重复无法靠构建工具自动发现，必须结合 Chrome DevTools 的 **Coverage** 面板（Ctrl+Shift+P → “Coverage”）手动扫描未使用的 CSS 规则，再反向定位冗余注入点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
