saascss-plug v1.0.5

关于此插件

应用场景

针对saas应用，大量复用组件，导致的重复css打包问题 适用于webpack4版本

使用方法

在css合并压缩插件（ExtractTextPlugin/MiniCssExtractPlugin）之后调用

 const SaasCssPlug = require('saascss-plug');
 plugins:[
   ...,
   new SaasCssPlug({
     input: "^main\..{8}\.css$",// 匹配css文件的正则
   }),
   ...
 ]

并传入输入输出的文件路径

压缩css去重效果

以租户配置中心为例： 将原本的menu项目css文件，由1.5M去重压缩至500K 将原本的主项目css文件，由1.1M去重压缩至500K 图“去重压缩前.png”和“去重压缩后.png”

css去重逻辑

获取经过合并的css文件，以“{”“}”为关键词进行切割， 区分出css选择符，和css内容，然后针对相同的css选择符进行合并“Object.assign” 将合并的最终Object转化成字符串，通过正则处理成为css格式文件，输出。

问题

因项目的合并逻辑是，同属性，后者覆盖前者。遂以下情况会出现问题。

场景1
.a{width:"100px"} .a{width:"你瞅啥"}

场景2
<div class="b bb">
.b{width:"100px"}.bb{width:"200px"}.b{width:"150px;"} 

ps

1.业务中使用的css的传输，为压缩传输，以上数据为本地开发文件大小。 实际使用中，并不会对css的加载过程有明显优化 2.css处理的过程中，针对特殊的字符做特殊处理，具体如下↓

• 带“@”开头的样式
• 带“important”，“\9”，“\0”结尾的样式
• “@font-face”字体引用的样式

• “UTF-8”声明文件格式

  以上是我所涉及到的特殊处理，诸位再使用中，可能还会遇到特殊情况，可自行添加处理规则

3.关于减少css数量，所带来的渲染性能提升并不明显 请酌情使用。