如何编写插件自动在WebpackVite构建中合并CSS模块冗余？

本文共计846个文字，预计阅读时间需要4分钟。

无需自定义插件即可实现自动扫描和合并冗余、CSS和模块。现代构建工具本身已内置机制处理此类问题，关键在于配置方式和引入路径是否符合规范。

Webpack：靠 MiniCssExtractPlugin + 模块图收口

Webpack 不会主动“扫描”文件系统找 CSS，而是依赖 JS 入口的 import 语句把样式纳入模块图。只要所有 CSS 都通过 import './xxx.css' 引入，MiniCssExtractPlugin 就能统一提取、去重、合并。

• 关掉 style-loader，启用 MiniCssExtractPlugin.loader，否则样式仍嵌在 JS 里
• 确保所有 CSS 文件都被某个 JS 模块 import 过，HTML 中的 <link> 不会被识别
• 多个入口（如 main.ts、admin.ts）各自 import 相同 CSS，会生成两份合并结果；若想复用，需将共用样式抽成单独 chunk，用 splitChunks 配置 cacheGroups 显式指定 name 和 filename
• 类名重复不是“冗余模块”，而是 CSS 层叠问题；真正冗余的是未被任何 import 触达的孤立 CSS 文件——这类文件根本不会参与构建，也无需插件扫描

Vite：静态 import 默认合并，动态 import 才分块

Vite 在构建时自动收集所有 静态 import 的 CSS，并按入口打包进单个 CSS 文件（如 main.css）。它不扫描目录，只分析 AST 中的 import 语句。

• import('./a.css') 是动态导入，会生成独立 chunk，不参与主样式合并
• 如果用了别名（如 @/styles/base.css），需确保 vite.config.ts 中 resolve.alias 正确配置，否则路径解析失败导致模块丢失
• Vite 不提供“扫描未引用 CSS”的能力，也没有必要——没被 import 的样式本就不该上线
• 想检查哪些 CSS 实际被包含，可查看 .vite/deps/ 或构建后 dist/assets/ 下输出的 CSS 文件内容

真正需要“扫描”的场景及替代方案

如果你的目标是发现并剔除长期未使用的 CSS 规则（如废弃组件样式），那属于 CSS Purge 范畴，和“合并模块”无关：

立即学习“前端免费学习笔记（深入）”；

• 用 PurgeCSS 或 UnoCSS 的 safelist + content 配置，基于 HTML/JS 中实际出现的类名做裁剪
• PostCSS 插件 postcss-unused-css 可标记未用规则，但无法全自动删除，需人工确认
• Webpack 生态中 css-minimizer-webpack-plugin 默认不删未用规则，需额外配 purgeOptions

不推荐写自定义插件的原因

手动遍历文件系统、解析 import、判断引用关系、重写路径……不仅容易出错，还绕过构建工具的缓存和依赖追踪机制。官方方案已足够健壮：

• Webpack：mini-css-extract-plugin + splitChunks + css-minimizer-webpack-plugin
• Vite：默认行为 + 用 ?inline 参数控制内联，或用 build.rollupOptions.output.manualChunks 拆分公共样式
• 开发阶段保持拆分（便于调试），构建阶段交由工具自动聚合