部署前，是否有工具可以压缩HTML类属性和CSS选择器？

Question

在当前项目中，我被要求在部署之前压缩HTML class属性和相应的CSS选择器。例如，生产环境中的代码如下：

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

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

在部署时，我希望HTML类和相应的CSS选择器被替换：

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

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

有哪些可用的工具可以完成这种压缩？

- steveyang

---

类应该易读易懂，但这并不是你在现实生活中会做的事情（实际上是一个很糟糕的想法），而且可能是一个毫无意义的任务。然而，优化选择器是个好主意。你有什么问题？ - Wesley Murch

你需要一种方法来将CSS和HTML中的“.foo”转换为“.a”，将“#bar”转换为“#b”吗？ - Galled

开发时应该保证代码可读性和可理解性，在发布网站时可以进行压缩，这不会影响网站的正常运行。很多网站都这么做了，例如可以看一下 Google Plus 的源代码。 - Niklas

OP可能正在寻找一种HTML压缩器，相当于javascript的Google Closure编译器，但用于HTML。 - aziz punjani

没错，我正在寻找一个HTML/CSS压缩器以在部署之前完成这项任务。 - steveyang

你找到解决方案了吗？ - Adrian Neatu

Answer 1

如果你真的想要重命名类名（谨记Madmartigan所说的），Google Closure Stylesheets可以做到。这可能有些过度，使用YUI Compressor或其他缩小+gzip工具应该已经足够提升性能了，但它确实可以做到。你需要使用其他Closure工具来对你的.js文件和HTML模板进行适当的更改。

- Litek

Answer 2

如果您使用Node处理代码，还有一个名为“rename-css-selectors”的项目：https://www.npmjs.com/package/rename-css-selectors。几乎每个构建工具（webpack、parcel、gulp等）都有插件可用：https://github.com/JPeer264/node-rcs-core#plugins。这将缩小HTML、JS和CSS文件中的所有CSS选择器（实际上是任何您想要的文件）。最终，我成功地减少了约20%的CSS文件大小。

- Jan Peer

Answer 3

这是非常短视的。

• 步骤1：在Web服务器中启用GZip或Zlib压缩
• 步骤2：所有文本都被压缩，通常可减少70％或更多
• 步骤3：没有第三步。
• 步骤4：获得利润

- Tyler Eaves

---

我建议任何进行负评的人都要解释为什么在牺牲代码可读性的情况下仅仅为了省下0.1%的成本是更好的选择，而不是免费获得更多的性能提升。如果你已经在web服务器中进行了压缩处理，那么这些编辑是没有任何用处的，因为压缩已经简化了常见的序列。 - Tyler Eaves

没有。现代的，甚至不那么现代的压缩器（如zlib）非常擅长去除冗余信息。这是它们的工作。这些HTML文件有多大，以至于这成为一个问题？ - Tyler Eaves

生产环境中不需要代码可读性！看看谷歌、Facebook和其他主要网站，它们都压缩了所有类和ID，以尽可能减少HTML和CSS的字节数。任何人都不应该关心生产环境的可读性。唯一的参数是性能。 - vsync

@vsync 我会在生产环境中将“安全性”加入到“性能”中 :) - gillytech

那么使用这些类的动态创建组件怎么办？我们有一些视图，每个视图都有数百个子元素，每个子元素都有这些字符串的副本。因此，要将样式应用于一个元素，可能意味着我们需要连接非常长的字符串，因为我们已经为可读性命名了这些类。然而，在生产过程中并不是必需的，我们的问题是，如果压缩这些符号可以节省大量内存，因为不需要分配长度约为100个字符或更多的字符串，而是只需要 ~10 个字符来编码它们的名称。这就是我们在我的地方提出的问题。 - Simon

Answer 4

即使在现代浏览器引入源映射之前，使用gzip进行压缩的代码最小化是一种最佳实践，因为即使与gzip一起使用时，仍然可以获得一些重要的节省。我们会在生产环境中接受可读性较差的代码，因为性能改进是值得的。现在有了源映射，我们可以同时做到最优秀的效果。这里有一篇很好的文章，演示了将gzip与最小化组合应用于大型网站的HTML页面时所产生的影响：http://madskristensen.net/post/effects-of-gzipping-vs-minifying-html-files 由于代码中字形的分布不同，所以你可以得到的存储空间节约量也会变化很大。因此，使用不同的最小化策略和语言进行最小化处理，甚至仅仅根据编码风格的不同，结果也会有所不同。但在大多数情况下，存储空间的节约仍然很显著。

最小化处理不仅仅是压缩字形，它还可以重新构造代码来删除不必要的字符，同时达到相同的效果，而这是gzip无法做到的。

现在，回到你具体的问题上来，你想要最小化处理类字形。由于这些字形的作用域在多个文件之间，而不是像局部一个文件一样，因此这很难做到。当最小化处理JavaScript时，默认情况下不会替换全局作用域变量，因为它们可能在另一个脚本中需要，但是对于CSS，您无法知道哪些类是本地类，哪些类是在另一个文件中定义的。更糟糕的是，您还需要将类的替换与JavaScript同步，因为在代码中通过类查找DOM元素非常常见。如果不改变编码方式，动态地构造类，即使没有这个问题，也将是一项巨大的工程。只有当您明确标识出CSS类字符串在哪里使用时，才能在JavaScript中同步字形替换：https://code.google.com/p/closure-stylesheets/#Renaming 幸运的是，字形替换是最小化处理和gzip都可以处理得非常好的内容，因此使用该特定的最小化策略所获得的大小节约量远远少于完全删除字形的其他策略。

- TimE

Answer 5

还有gulp-selectors。

安装它：

npm install gulp gulp-selectors

现在是一个快速而简单的 node 脚本：

var gulp = require('gulp');
var gs = require('gulp-selectors');
gulp
  .src(['*.html', '*.css'])
  .pipe(gs.run({}, '{ids: "*"}'))
  .pipe(gulp.dest('.'))'

< p > gs.run() 的第二个参数是为了保留ID不变，也可以参考其网站：https://www.npmjs.com/package/gulp-selectors

- phk

Answer 6

对于 CSS，有YUI 压缩器。它会删除不必要的空格，并将您的属性转换为缩写形式（如果您尚未使用它）。至于 HTML，我不知道任何工具，但请记住，在 HTML 中修剪空格并不总是安全的。

- Litek

---

YUI压缩器可以修剪CSS文件，但不会替换选择器，因为这需要在CSS和HTML两侧都完成。 - steveyang

如果您更改了HTML属性，请不要忘记在JavaScript代码中使用ID或类时执行相同的操作。哦，还有别忘了进行基准测试和比较结果，这样您就可以看到这实际上有多少帮助（或没有多少帮助）。 - Wesley Murch

Answer 7

有一个插件https://github.com/vreshch/optimize-css-classnames-plugin可以作为Webpack Loader使用。 在大多数情况下可能有效。

- Vreshch Volodymyr