postcss的cssnano插件压缩CSS过程中对@keyframes重命名存在重复的问题。

现象：

打包后iview的弹框的遮罩动画效果出现延时。

推断：

1.页面中的遮罩效果被改变。
2.页面中的遮罩效果被覆盖。

定位问题：
查看弹框遮罩Element的style样式，发现没有增减或是覆盖样式，但是@keyframes的名称被缩写成了a。
查看后发现a中定义的动画效果并不是iview定义的动画效果。打包前项目中全局搜索并没有发现名称为a的动画。
在打包后的项目中全局搜索iview中定义的遮罩动画名称，并没有搜索到，所以推断打包过程中@keyframes的名称被缩写了。
在打包后的项目中全局搜索@keyframes a，发现了两个，所以原因是被缩写的动画名称出现了重复。
查看配置文件发现使用了postcss的cssnano插件压缩css，压缩过程中使用了postcss-reduce-idents插件对自定义的标识符重命名。

解决问题：

修改配置文件postcss.config.js，plugins属性中增加

'postcss-reduce-idents': {
keyframes: false,
},

禁止插件对自定义动画名称的重命名。

可查看详细文档 https://github.com/cssnano/cssnano/tree/master/packages/postcss-reduce-idents