在部署之前,是否有压缩HTML类属性和CSS选择器的工具?

在部署之前,是否有压缩HTML类属性和CSS选择器的工具?,html,css,compression,Html,Css,Compression,在当前项目中,我被要求在部署之前压缩HTML类属性和相应的CSS选择器。 例如,生产代码为: <div class="foo"> <div id="bar"></div> </div> .foo {/*Style goes here*/} #bar {/*Style goes here*/} .foo{/*样式在此处使用*/} #bar{/*样式在这里*/} 在部署时,我希望替换HTML类和相应的CSS选择器: <div clas

在当前项目中,我被要求在部署之前压缩HTML类属性和相应的CSS选择器。 例如,生产代码为:

<div class="foo">
  <div id="bar"></div>
</div>

.foo {/*Style goes here*/}
#bar {/*Style goes here*/}

.foo{/*样式在此处使用*/}
#bar{/*样式在这里*/}
在部署时,我希望替换HTML类和相应的CSS选择器:

<div class="a">
  <div id="b"></div>
</div>

.a {/*Style goes here*/}
#b {/*Style goes here*/}

.a{/*样式在这里使用*/}
#b{/*样式在这里使用*/}

有什么可用的工具来归档这种压缩?

这是令人惊讶的短视

  • 步骤1:在web服务器中打开GZip或Zlib压缩
  • 步骤2:所有文本都会被压缩,通常压缩70%或更多
  • 第三步:没有第三步
  • 第四步:利润

对于css,有一个。它将删除不必要的空白,并将您的属性转换为速记,如果您还没有使用它。至于html,我什么都不知道,但请记住,在html中删减空白并不总是安全的。

如果您真的想重命名类名(记住Madmartigan所说的话),则会这样做。这是一个过度的杀伤力,YUI压缩机或任何其他小型化+gzip工具应该能给您足够的性能提升,但它可以做到这一点。您必须使用其他闭包工具对
.js
文件和html模板进行适当的更改。

即使在现代浏览器引入源地图之前,gzip的缩小也没有什么错,缩小是一种最佳实践,因为即使与gzip结合使用,您仍然可以获得一些显著的节约。我们忍受了更差的产品可读性,因为性能改进是值得的。现在有了源地图,我们就可以吃蛋糕了。下面是一篇很好的文章,演示了在大型站点的html页面上结合缩小和gzip的效果:

根据缩小的代码的字形分布,节省的差异非常大,因此结果将根据缩小策略和缩小的语言而变化,甚至仅取决于编码样式。在一般情况下,节省的费用仍然很大

缩小处理的不仅仅是压缩字形,它还可以重新构造代码以删除不需要的字符,同时实现同样的效果,这是Gzip无法做到的

现在,回到您的具体问题,在您的例子中,您希望缩小类图示符。这是很难做到的,原因有几个。这些标志符号的作用域位于多个文件之间,而不是将其作用域限定为一个文件的本地部分。当缩小javascript时,默认情况下不会替换全局范围变量,因为在另一个脚本中可能需要它们,但在CSS中,您不知道哪些类是本地的,哪些可以在另一个文件中定义。更糟糕的是,您还需要将类替换同步到javascript,因为通过类在代码中查找DOM元素非常常见。这是不可能同步的,因为类可能是用javascript动态构造的,即使没有这个问题,这也是一个巨大的考验。如果更改编码样式以确保明确标识css类字符串的使用位置,则只能在javascript中同步glyph替换:

幸运的是,字形替换是缩小所做的事情,而gzip也做得非常好,因此这种特定的缩小策略所节省的大小远小于完全删除字形的其他策略。

也有

安装它:

npm安装咕噜咕噜选择器
现在是一个快速且肮脏的
节点
脚本:

var gulp=require('gulp');
var gs=需要('gulp-selector');
吞咽
.src(['*.html','*.css'])
.pipe(gs.run({},{id:*“}'))
.pipe(吞咽目标('.')”

gs.run()
的第二个参数是为了让它保持ID不变,另请参见其网站:

如果使用节点处理代码,还有一个名为“重命名css选择器”的项目:

几乎每个构建工具都有插件(webpack、packet、gulp等):

这将缩小HTML、JS和CSS文件(实际上是您想要的任何文件)中的所有CSS选择器。最后我保存了20%的CSS文件大小。

有插件
作为网页包加载器工作。在大多数情况下,这可能是可行的

类应该是可读的和可理解的,这不是你在现实生活中会做的事情(实际上是一个很糟糕的主意),而且可能是一个毫无意义的任务。然而,优化选择器是一个好主意。你的问题是什么?你需要一种方法来将CSS和HTML中的“.foo”转换为“.a”和“#bar”转换为“#b”?@Madmartigan它们在开发时应该是可读和可理解的,没有理由在发布网站时不能压缩它们。有很多网站都能做到这一点,比如,看看google plus的源代码。是的,我正在寻找一个HTML/CSS压缩器来在部署之前完成这项任务。你找到解决方案了吗?我强烈建议任何人解释为什么最好以代码可读性为代价节省0.1%,而不是免费节省大量代码。如果您已经在Web服务器中进行压缩,那么这些编辑不会起任何作用,因为压缩已经简化了常见序列。不,没有。像zlib这样的现代压缩器,即使不是那么现代,也非常擅长消除冗余信息。那是他们的工作。这些HTML文件有多大,这甚至是一个问题?gzip不适用于通过
文件:
提供服务的本地文件。对于一个12MB的参考文件(是的,我现在正在看的是一个真实世界的例子),这个油嘴滑舌的答案对这个问题没有帮助。清理像我的文件中那样有详细名称的文件所节省的费用不是“0.1%”,而是多个百分点。(这对于那些使用HTTP 1.1+的人来说是合理的建议,howe