browserslist配置直接影响css体积和渲染行为，因其决定autoprefixer是否添加、添加哪些前缀：规则过宽引入冗余前缀增大体积，过窄导致旧浏览器白屏；需精准匹配目标用户浏览器分布，并定期更新caniuse-lite数据库。
配置错 browserslist，Autoprefixer 就会加错前缀、漏加前缀，甚至把现代语法转成冗余 polyfill —— 不是“有没有配”，而是“配得准不准”。
为什么 browserslist 配置直接影响 CSS 体积和渲染行为
Autoprefixer 不是凭空加前缀的。它查 caniuse-lite 数据库，对照你写的规则，决定要不要给 display: flex 加 -webkit-box、要不要给 gap 加 -moz- 前缀。规则太宽（比如 last 2 versions），旧版 Chrome/Edge 的冗余前缀就进来了；规则太窄（比如只写 Chrome >= 120），IE11 或老安卓 WebView 就直接白屏。
-
not dead确实排除 IE 11，但不等于排除所有 IE ——ie >= 11才明确保底 -
> 1%是全球统计，国内项目必须补> 1% in CN，否则可能漏掉 QQ 浏览器或 UC -
last 3 Chrome versions和Chrome >= 115效果不同：前者随 Chrome 发布自动滚动（今天可能是 126/125/124），后者锁定下限（115～126 都算）
Webpack 里 postcss-loader 必须显式启用 Autoprefixer
很多人以为装了 postcss-loader 就自动加前缀，其实不是。它只是个管道，插件得自己塞进去。如果没配，display: flex 在 IE11 里照样不生效。
- 确保
postcss.config.js或 Webpack 的postcss-loader.options.plugins里有require('autoprefixer') - 不要依赖
postcss-preset-env代理 —— 它默认关闭autoprefixer，得手动开：autoprefixer: true - 检查
package.json是否真有browserslist字段，或者根目录是否有.browserslistrc——autoprefixer.yml在 Webpack 场景下基本无效
开发环境与生产环境该用不同配置
开发时跑最新 Chrome/Firefox，没必要为 IE 生成一堆前缀拖慢热更新；上线才需要覆盖真实用户分布。硬塞同一套规则，既浪费构建时间，又污染 sourcemap。
- 在
package.json里用对象写法区分环境：
"browserslist": {
"production": ["> 0.2%", "not dead", "IE >= 11"],
"development": ["last 1 chrome version", "last 1 firefox version"]
}
BROWSERSLIST_ENV=development npm run dev 控制读取哪一组BROWSERSLIST="ie 11" npm run build
最常被忽略的是 caniuse-lite 数据库过期 —— 它半年不更新，Autoprefixer 就不知道 Chrome 125 已原生支持 dialog，还会傻乎乎加 -webkit-。定期运行 npx browserslist --update-db 才算真正配到位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
