postcss 比 sass 编译快，因其纯 ast 遍历、无逻辑解析、插件按需加载；而 sass 的 @import 递归和作用域检查随文件数指数级变慢。
为什么 postcss 比 sass 原生编译快得多
大型项目里，sass 的 @import 递归解析和变量作用域检查会随文件数指数级变慢；postcss 是纯 AST 遍历，不解析逻辑，只做字符串转换。它本身不处理变量、嵌套或混合（mixin），这些得靠插件按需加载——没用的语法就根本不进流水线。
实操建议：
- 把
sass全量迁移成postcss不现实，但可先将「纯样式覆盖层」（比如主题色替换、RTL 支持、CSS 变量 fallback）抽出来走postcss流水线 - 禁用
postcss-sass这类试图兼容 Sass 语法的插件——它们会重新引入解析开销，反而更慢 - 在
postcss.config.js中显式指定plugins数组顺序，把postcss-custom-properties放前面，autoprefixer放最后：前者影响后续插件能否识别变量，后者只做属性补全，放最后最省 CPU
cssnano 默认配置正在悄悄拖慢你的构建
cssnano 4.x+ 默认开启 svgo 和 postcss-discard-comments，但 SVG 内联压缩在大型项目中极易触发内存溢出；注释删除则会破坏 source map 行号对齐，导致调试时样式定位错位。
常见错误现象：webpack 构建卡在 cssnano 阶段，node --max-old-space-size=4096 也救不回来；DevTools 里点击元素，Styles 面板显示的行号指向空白行。
实操建议：
- 开发环境完全禁用
cssnano，用postcss-preset-env+autoprefixer足够 - 生产环境启用时，显式关闭高开销项：
{ svgo: false, discardComments: { removeAll: true } }→ 改为{ svgo: false, discardComments: { removeAllButFirst: true } }，保留首行注释不影响调试 - 若项目含大量内联 SVG，改用
svg-baker提前转成 symbol sprite，不在 CSS 编译期处理
Webpack 的 css-loader importLoaders 设定错一层，整个链路白优化
importLoaders 控制的是「当前 CSS 文件里 @import 进来的文件」经过几个 loader 处理。设成 1，只让 postcss-loader 跑一遍；设成 2，它会再把被 import 的文件丢给前一个 loader（比如 sass-loader）重跑——这在 PostCSS 主导的项目里是典型冗余。
使用场景：你有 base.css 里 @import 'theme.css'，而 theme.css 里用了 CSS 变量，需要 postcss-custom-properties 处理。
实操建议：
- 确认
css-loader的importLoaders和实际 loader 链长度一致：比如 loader 配置是[css-loader, postcss-loader, sass-loader]，那importLoaders: 2才能让@import文件进后两个 loader - 如果已弃用
sass-loader，就把importLoaders改成1，否则postcss-loader会反复调用已移除的sass-loader报错：Error: Cannot find module 'sass' - 用
postcss-import替代 CSS 原生@import—— 它在 PostCSS 层完成合并，不依赖css-loader的importLoaders，还能做去重和路径解析
Source map 生成方式选错，热更新速度直接腰斩
Webpack 的 devtool: 'source-map' 会让每个 CSS 文件都生成独立 map，大型项目动辄上百个文件，磁盘 I/O 和内存占用飙升；而 'inline-source-map' 把 map 塞进 CSS 末尾，HTTP 响应体翻倍，浏览器解析也更慢。
性能影响：开启热更新后，改一个变量，style-loader 注入新样式前要等所有 map 写完，延迟从 200ms 拉到 1.2s。
实操建议：
- 开发环境统一用
devtool: 'eval-cheap-module-source-map'：只映射行号，不映射列，体积小、生成快 - 禁用
css-loader的sourceMap: true，除非你真需要在 DevTools 里跳转到原始 PostCSS 插件处理前的代码行（几乎没人需要） - CI 环境打包时，把
source-map-explorer加进脚本，定期检查生成的 CSS map 是否意外包含 node_modules 里的第三方样式——那些不该出现在最终产物里
真正卡住编译的，往往不是插件多，而是 loader 之间边界模糊：比如该由 postcss-import 解决的路径问题，硬塞给 Webpack 的 resolve.alias；或者以为 cssnano 越激进越小，结果它在压缩时反复 parse 整个 AST。这些地方不细看配置，光换工具没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
