在部署之前，是否有压缩 HTML 类属性和 CSS 选择器的工具？答案

【问题标题】：Before deployment, is there tool to compress HTML class attribute and CSS selectors?在部署之前，是否有压缩 HTML 类属性和 CSS 选择器的工具？
【发布时间】：2023-03-31 07:28:01
【问题描述】：

在当前项目中，部署前要求我压缩 HTML 类属性和相应的 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*/}

有哪些可用的工具来存档此压缩？

【问题讨论】：

类应该是可读和可理解的，这不是你在现实生活中会做的事情（实际上是一个坏主意），而且可能是一个毫无意义的任务。然而，优化选择器是个好主意。你有什么问题？
您需要一种方法将 CSS 和 HTML 中的“.foo”转换为“.a”，将“#bar”转换为“#b”？
@Madmartigan 在开发时它们应该是可读和可理解的，发布站点时没有理由不能压缩它们。有很多网站可以做到这一点，例如在 google plus 上查看源代码。
是的，我正在寻找一个 HTML/CSS 压缩器来在部署之前完成这项任务。
您找到解决方案了吗？

标签： html css compression

【解决方案1】：

如果你真的想重命名类名（记住 Madmartigan 所说的话）Google Closure Stylesheets 会这样做。这是一种矫枉过正，YUI Compressor 或任何其他缩小 + gzipping 工具应该给你足够的性能提升，但它可以做到。您必须使用其他 Closure 工具对您的 .js 文件和 html 模板进行适当的更改。

【讨论】：

【解决方案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 文件大小。

【讨论】：

【解决方案3】：

这是惊人的短视。

第 1 步：在 Web 服务器中开启 GZip 或 Zlib 压缩
第 2 步：所有文本都被压缩，通常压缩了 70% 或更多
第 3 步：没有第 3 步。
第 4 步：利润

【讨论】：

我强烈建议任何不赞成投票的人解释为什么以代码可读性为代价节省 0.1% 比免费节省大量成本更好。如果您已经在网络服务器中进行压缩，那么这些编辑不会执行任何操作，因为压缩已经在简化常见序列。
不，没有。现代的，甚至不是那么现代的压缩器，比如 zlib，都非常擅长删除冗余信息。那是他们的工作。这些 HTML 文件有多大，这甚至是一个问题？
gzip 不适用于通过 file: 提供的本地文件。对于 12MB 的参考文件（是的，我现在正在查看的真实示例），这个 glib 对问题的非回答没有帮助。在我的文件中清理具有详细名称的文件所节省的费用不是“0.1％”，它们是多个百分比。（不过，对于那些使用 HTTP 1.1+ 的人来说，这是一个合理的建议。）
生产环境不需要代码可读性！请参阅 Google、Facebook 和任何其他主要网站。所有类和 ID 都被压缩，以从 HTML 和 CSS 中节省尽可能多的字节。没有人应该关心生产可读性。 唯一的参数是性能。
@vsync 我也会在生产中为“性能”添加“安全性”:)

【解决方案4】：

使用 gzip 压缩并没有什么问题，即使在现代浏览器引入源映射之前，压缩是一种最佳做法，因为即使与 gzip 一起使用，您仍然可以获得一些显着的节省。我们忍受了生产环境中更糟糕的可读性，因为性能改进是值得的。现在有了源地图，我们也可以吃蛋糕了。这是一篇很好的文章，展示了在大型网站的 html 页面上结合缩小和 gzip 的效果：http://madskristensen.net/post/effects-of-gzipping-vs-minifying-html-files

您获得的节省差异很大，具体取决于被缩小的代码的字形分布，因此结果会因缩小策略和被缩小的语言而异，甚至取决于编码风格。在一般情况下，节省的费用仍然很可观。

缩小处理不仅仅是压缩字形，它还可以重组代码以删除不需要的字符，同时达到相同的效果，这是 gzipping 无法做到的。

现在，回到您的具体问题，在您的情况下，您希望缩小类字形。由于几个原因，这更难做到。这些字形的范围在几个文件之间，而不是可以将它们限制在一个文件的本地部分。在缩小 javascript 时，默认情况下不会替换全局范围变量，因为它们可能在另一个脚本中需要，但是使用 CSS，您不知道哪些类是本地的，哪些可能在另一个文件中定义。更糟糕的是，您还需要将类替换同步到 javascript，因为通过类在代码中查找 DOM 元素是很常见的。同步这个是不可能的，因为类可能是在 javascript 中动态构建的，即使没有这个问题，这也将是一个巨大的考验。如果您更改编码样式以确保明确识别 css 类字符串的使用位置，则只能在 javascript 中同步字形替换：https://code.google.com/p/closure-stylesheets/#Renaming

幸运的是，字形替换是缩小所做的事情，而 gzipping 也做得非常好，因此该特定缩小策略所节省的大小比其他完全删除字形的策略要少得多。

【讨论】：

【解决方案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('.'))'

gs.run() 的第二个参数是为了让它保持原样的 ID，另请参见其网站：https://www.npmjs.com/package/gulp-selectors

【讨论】：

【解决方案6】：

对于 css，有 YUI compressor。如果您还没有使用它，它将删除不必要的空格，并将您的属性转换为简写形式。至于 html，我什么都不知道，但请记住，在 html 中修剪空白并不总是安全的。

【讨论】：

YUI 压缩器会修剪 CSS 文件，但不会替换选择器，因为它需要在 CSS 和 HTML 端完成。
如果您更改 HTML 属性，如果您在其中使用 id 或类，请不要忘记对您的 javascript 代码执行相同的操作。哦，别忘了对结果进行基准测试和比较，这样你就可以看到这实际上有多少（或多少）帮助。

【解决方案7】：

有插件 https://github.com/vreshch/optimize-css-classnames-plugin 作为 Webpack 加载器工作。这可能在大多数情况下都有效

【讨论】：