有什么agressive CSS Minification工具吗？ [英] Are there any agressive CSS Minification tools?

问题描述

我想知道是否有人知道一个工具，将积极重写CSS以更有效地压缩样式。例如我想：

  .foo {color：red; font-size：16px; height：20px; } 
 .bar {color：red; font-size：16px; height：30px; } 
  

可压缩为：

  .foo，.bar {color：red; font-size：16px; } 
 .foo {height：20px; } 
 .bar {height：30px; } 
  

清楚的是，我知道的所有minifiers，比如YUI Compressor，并且可能将几个属性（如 font-family 和 font-size 加入 / code>）。我正在寻找的东西，愿意做一个完全重写的文件的结构。

除此之外，如果有人知道任何工作关于这背后的压缩逻辑，这个信息将被欣赏。我想在写自己的，如果我找不到一个，但有一百万的事情要考虑，如 margin-top over-writing部分 margin ，selector specificity&包括顺序，等etc等...那么如何有效地压缩信息的工作，像重复一个选择器或属性会更有效吗？

解决方案

我不知道任何积极的CSS缩小工具，但您可以使用以下方法：

设置

1. 展开CSS（ margin：1px 0 0 0; 到 ：1px; margin-left：0px; ...）。


2. 创建一个图G =（V，E）作为边集：
   
   
   
   • V由两个集合A（唯一选择器，例如 div p> span ， #myid ）和B（唯一属性，例如
   
   
   • E包含选择器之间的所有关联（
   
   
   
   • 使用适当的权重函数 c 为 b 中的元素。这可以是给定元素 b 或累积长度的属性 - 累积长度的选择器的邻居的数量。您的选择。
   
   

您可能会注意到，通过使用这种方法，您将获得一个二分图。现在尝试以下贪婪算法（伪码）：

算法

1. 在 b 中具有最大权重并将其添加到空集合中的元素 b 如果B中的另一个元素d具有相同的权重
   
   
   
   • 如果这样的广告存在，检查它是否覆盖相同的选择器。
     
     
     
     1. 如果 d 涵盖相同的选择器：将 d 添加到 Z
     
     
     2. 如果 d 不覆盖相同的选择器，则检查具有相同权重的下一个元素，或者如果选中所有元素，则转到步骤3
     覆盖一些选择器的一组属性。
     
     3. 删除 Z 中的所有元素及其在G中的相邻边，并删除 Z 本身。
        
     4. 如果B不为空，请转到步骤1.
     
     
     5. 您的缓冲区包含预先缩小的CSS代码。您现在可以合并一些属性（例如 margin-top：0px; margin-left：1px ）。
     
     

     
     
     

     备注

     
     
     

     请注意，实际压缩取决于您的体重函数。因为它是一个贪婪的算法，它可能会返回一个缩小的CSS，但我相信有人会发布一个反例。请注意，您必须在删除 Z 中的元素后更新权重函数。

     
     
     

     运行时估计

     
     
     

     如果我没有错误，算法将总是终止并且将在O（ | B | ^ 2 * | A | ）中运行。如果你使用堆和排序每个邻接表中的属性（建立时间O（ | B | * | A | log（| A |））） O（ | B | * | A | *（log（| B |）+ log（| A |）））。

     
     

     I'm wondering if anyone knows of a tool that will aggressively rewrite CSS to compress styles more efficiently. e.g. I'd like:

     .foo { color : red; font-size: 16px; height: 20px; }
     .bar { color : red; font-size: 16px; height: 30px; }
     

     to be compressed to:

     .foo, .bar { color : red; font-size : 16px; }
     .foo { height : 20px; }
     .bar { height : 30px; }
     

     To be clear, all the minifiers I know of, like YUI Compressor, only remove white-space and possibly join a few properties (like font-family and font-size into font). I'm looking for something that's willing to do a complete re-write of the structure of a file.

     Short of that, if anyone knows of any work anyone has done with regards to the compression logic behind this, that info would be appreciated. I'm thinking of writing my own if I can't find one, but there's a million things to consider, like margin-top over-writing part of margin, selector specificity & include order, etc etc etc... Then the job of how to efficiently compress the info, like will it be more efficient to repeat a selector or a property?

     解决方案

     I don't know any aggressive CSS minification tool, but you could use the following approach:

     Setup

     1. Expand your CSS (margin:1px 0 0 0; to margin-top:1px; margin-left:0px;...).
     2. Build a graph G = (V,E) with V as set of vertices and E as set of edges:
        • V consists of the conjunction of the two sets A (unique selectors, eg. div, p > span, #myid) and B (unique properties, eg. display:block;, color:#deadbeef;).
        • E consists of all associations between a selector (in A) and a property (in B).
     3. Use an appropriate weight function c for your elements in b. This could be the number of neighbors of a given element b, or accumulated lenght of properties - accumulated length of selectors. Your choice.

     You may notice that by using this approach you'll get a bipartite graph. Now try the following greedy algorithm (pseudo code):

     Algorithm

     1. Take an element b in B that has maximum weight and add it to an empty set Z
     2. Check whether another element d in B has same weight
        • if such a d exists check whether it covers the same selectors.
          1. If d covers the same selectors: add d to Z and go to step 2.
          2. if d does not cover the same selectors check the next element with the same weight or go to step 3 if you checked all elements d.

     3. Now Z is a set of properties covering some selectors. Parse this as CSS into a buffer.
     4. Delete all elements in Z and their adjacent edges in G and delete Z itself.
     5. If B is not empty go to step 1.
     6. Your buffer contains a pre-minified CSS code. You can now merge some properties (eg. margin-top:0px;margin-left:1px).

     Remarks

     Please note that the actual compression depends on your weight function. As it is a greedy algorithm it will likely return a minified CSS, but I believe someone will post a counterexample. Note also that you have to update your weight function after deleting the elements in Z.

     Runtime estimate

     The algorithm will always terminate and will run in O(|B|^2*|A|) if I'm not mistaken. If you use a heap and sort the properties in each adjacency list (setup time O(|B|*|A|log(|A|))) you'll get O(|B|*|A|* (log(|B|)+log(|A|))).

     这篇关于有什么agressive CSS Minification工具吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！