面试题：CSS Autoprefixer工具配置优化

Question

在一个大型前端项目中，发现使用Autoprefixer添加浏览器前缀后，打包文件体积增大明显。请分析可能导致这种情况的原因，并提出至少两种优化Autoprefixer配置以减小文件体积的方法。

Answer 1

原因分析

1. 过度添加前缀：Autoprefixer可能为所有浏览器版本添加了前缀，包括一些已经不再使用或不需要特定前缀的旧版本浏览器，导致大量冗余代码。
2. 重复添加：在项目中可能存在部分样式规则被多次处理，使得相同的带前缀样式被重复添加到打包文件中。

优化方法

1. 配置目标浏览器：
   • 在Autoprefixer配置文件（如.browserslistrc）中，精确指定项目需要支持的浏览器及版本范围。例如，若项目主要面向现代浏览器，可以设置> 1%, last 2 versions, not dead，这样Autoprefixer只会为符合这些条件的浏览器添加前缀，减少不必要的前缀添加。
2. 使用postcss - purgecss：
   • 安装postcss - purgecss插件，该插件可以在打包过程中分析项目中实际使用到的CSS规则，清除未使用的CSS代码。结合Autoprefixer使用时，先让Autoprefixer添加前缀，再由postcss - purgecss去除未使用的样式，从而减小文件体积。
3. 启用精简模式：
   • 部分构建工具（如Webpack）在与Autoprefixer集成时，可通过特定配置启用精简模式。比如在Webpack的postcss-loader配置中，设置minimize: true，使Autoprefixer生成更精简的带前缀代码，减少代码冗余。