MiniCssExtractPlugin 本身不提速，但配置错误会导致构建变慢、缓存失效和 CSS 重复输出；关键在 loader 链顺序、chunkFilename 含 contenthash、环境区分使用 style-loader（开发）或 MiniCssExtractPlugin.loader（生产）。
MiniCssExtractPlugin 本身不提速，但配错会拖慢构建、搞崩缓存、甚至让 CSS 重复输出——关键在 loader 链顺序、chunkFilename 规则和环境区分。
为什么 CSS 文件被重复打包？
现象是多个异步路由 chunk 都生成了内容一模一样的 main.css，不是缓存问题，是 Webpack 没法识别“这些 CSS 内容其实相同”。
-
chunkFilename必须带contenthash，比如'[name].[contenthash:8].css'；写成'[name].css'就会每个 chunk 各自输出一份 - 别在
splitChunks.cacheGroups里给 CSS 单独配name，它会覆盖插件的 contenthash 行为，导致 hash 失效 - 确保所有 CSS 引用路径最终归并到同一 chunk（比如都走
import './index.css'，而不是分散在不同组件里重复@import）
开发环境热更新失效或样式不生效？
本质是 loader 用了生产环境的 MiniCssExtractPlugin.loader，但它不支持 HMR。
- 必须按环境切换：开发用
'style-loader'，生产才用MiniCssExtractPlugin.loader - 别图省事在 rules 里硬写
use: [MiniCssExtractPlugin.loader, 'css-loader']—— 这会让 dev 模式也走 extract，热更新直接挂掉 - 检查
process.env.NODE_ENV是否被正确注入，Webpack 5 默认不自动设，得靠DefinePlugin或命令行--mode=development
css-loader 开启 modules 后体积暴增？
不是 CSS 变大了，而是 css-loader 在 modules: true 下默认把每个类名转成 .button_abc123，还往 JS bundle 塞了一堆 locals 解析逻辑。
立即学习“前端免费学习笔记（深入）”；
- 删掉
exportLocalsConvention: 'camelCase'（除非你真在 JS 里写styles.buttonPrimary） - 第三方 UI 库、重置样式、工具类，必须显式包进
:global(.el-button)或:global(*)，否则全被当局部处理 - 只做 SSR 提取？加
onlyLocals: true，避免客户端打包时注入无用的locals对象
CSS 压缩后体积没降，或者 autoprefixer 不生效？
压缩没效果，大概率是 PostCSS 没跑完；autoprefixer 失效，基本是插件顺序错了。
-
css-loader要配importLoaders: 1，不然@import进来的文件不会进 PostCSS 流水线 -
postcss.config.js的plugins数组顺序必须是：postcss-import→postcss-preset-env→autoprefixer；postcss-preset-env放autoprefixer前面会导致 grid 等声明被提前转译，前缀加不上 - Webpack 5.70+ 的
CssMinimizerPlugin可开clean: true剔除未匹配的选择器，但前提是你的 CSS 类名没被 JS 动态拼接（比如className={\`btn-\${type}\`}）
真正卡住效率的从来不是插件本身，而是 loader 链里一个没关的 exportLocalsConvention、一个漏掉的 contenthash、或者 PostCSS 插件顺序里一个错位的逗号。
