通过webpack对css压缩后所引起的重名问题

发表于 分类于 评论数： 本文字数： 899 阅读时长 ≈ 2 分钟

起因

我们维护了两个组件库，一套用于PC，另一套用于Mobile。有一个使用方同时引入了这两个库，这时候突然发现了一个诡异的现象：

一个tag组件凭空旋转起来，事实上没有给这个tag添加任何动画效果

发现

直接从页面表现来看，很难发现问题所在。我们进行了以下步骤进行排查

  1. 通过chrome的animate面板，看执行的是什么动画。发现其动画名为a
  2. 通过vue控制台/源码，发现其使用了vue的transition组件，并且其transition使用了PC组件库提供的fade动画。

分析

为什么fade动画会变成了旋转？我们在编译的css文件中寻找tanslate和@keyframes关键词，发现

1
2
3
@keyframes a {
    translate:rotate(1turn)
}
1
2
3
4
5
6
7
8
@keyframes a {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

有2个名为a的动画，那么问题就清楚了，是两个动画冲突了。但是怎么会都叫a的呢。我们不太可能这么随意的起名。源码中也没有找到名为a的动画。那么有一种可能，就是在打包的时候被改名了。

找到Vue本身提供的webpack.prod.conf.js，发现里面是这样的：

1
2
3
4
5
new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
})

而我们用来发布包的webpack.pack.conf.js里面是这样的：

1
new OptimizeCSSPlugin()

说明pack脚本是按照最大压缩方式进行压缩的，会对css进行改名，如果两个库都采用同样的方式进行压缩，自然会产生命名冲突。vue官方的配置很明显考虑到了这一点，所以直接采用了避免冲突的「安全」模式。

解决

将css压缩模式换为safe并重新打包，问题解决。