应停用exportLocalsConvention、显式包裹全局类为:global()、启用onlyLocals:true用于SSR，并确保mini-css-extract-plugin的chunkFilename含contenthash以避免重复输出。
css-loader开启modules后体积暴增，怎么停？
不是CSS本身变大，而是css-loader在启用modules: true时，默认把每个类名都当局部作用域处理，生成一堆.button_abc123这样的哈希后缀——更糟的是，它还会往JS Bundle里塞入大量用于解析局部类名的运行时代码。
真正该关的不是modules开关，而是它的副作用行为：
- 删掉
exportLocalsConvention: 'camelCase'（除非你真需要JS里用styles.buttonPrimary这种写法） - 所有第三方UI类、重置样式、全局工具类，必须显式包一层
:global(.el-button)或:global(*) - 如果只做SSR样式提取，用
onlyLocals: true，避免客户端打包注入冗余locals对象
mini-css-extract-plugin输出重复CSS文件？
常见现象：首页加载main.css，点个路由又加载一遍同名main.css，但内容完全一样——这不是缓存问题，是Webpack chunk分组逻辑和插件命名规则打架了。
chunkFilename必须带contenthash，否则插件无法识别“内容相同就复用”：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
chunkFilename: '[name].[contenthash:8].css' - ❌ 错误：
chunkFilename: '[name].css'（多个异步chunk引用同一份CSS，会各自输出一份） - 别在
splitChunks.cacheGroups里给CSS单独配name，它会覆盖contenthash行为
PostCSS autoprefixer失效，IE11白屏？
不是插件没起作用，是执行顺序错了：如果postcss-preset-env在autoprefixer之前运行，它会先把display: grid转成现代语法，等autoprefixer拿到时，原始grid声明已经没了，自然加不出-ms-grid前缀。
PostCSS插件顺序必须严格按需排列：
- 先
postcss-import（处理@import） - 再
postcss-preset-env（转译新语法） - 最后
autoprefixer（补兼容前缀） - 检查
postcss.config.js里的plugins数组顺序，别靠文档默认顺序蒙混过关
压缩CSS但体积没降？可能漏了关键配置
CssMinimizerPlugin默认只压缩，不移除未使用的规则。如果你用的是CSS Modules + 动态类名，或者有大量被JS控制显隐的样式，光压缩没用。
得配合两件事：
- 确保
mini-css-extract-plugin的loader链里，css-loader开了importLoaders: 1，不然PostCSS不会处理@import进来的文件 - 在
CssMinimizerPlugin里启用clean: true（Webpack 5.70+），它会自动剔除未匹配的选择器（前提是你的CSS没有JS动态拼接类名） - 避免在
optimization.minimizer里重复配置多个CSS压缩实例，容易冲突
:global()漏写一个类，就会让整个第三方组件库的样式被重命名并注入locals；又比如contenthash少了个冒号，打包后看着文件名一样，实际浏览器发了三次请求。这些细节不盯住，优化就只停留在表面。 
