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

发布于 2024-12-14 15:29:41 字数 471 浏览 1 评论 0原文

在当前项目中，我被要求在部署之前压缩 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*/}

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

原文

In current project, I was asked for compressing the HTML class attribute and corresponding CSS selectors before deployment.
For example, the code on production is:

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

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

On deployment, I want the HTML class and corresponding CSS selectors to be substituted:

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

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

What's the available tools there to archive this compression?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

池木 2024-12-21 15:29:41

如果您确实想重命名类名（请记住 Madmartigan 所说的）Google Closure 样式表就是这样做的。这是一个过大的杀伤力，YUI 压缩机或任何其他缩小 + gzip 工具应该给你足够的性能提升，但它可以做到这一点。您必须使用其他 Closure 工具对 .js 文件和 html 模板进行适当的更改。

回复收藏 0 原文

痞味浪人 2024-12-21 15:29:41

如果您使用节点处理代码，还有一个名为“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 文件大小。

回复收藏 0 原文

乖不如嘢 2024-12-21 15:29:41

这是令人惊奇的短视行为。

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

回复收藏 0 原文

赢得她心 2024-12-21 15:29:41

使用 gzipping 进行缩小并没有什么问题，即使在现代浏览器引入源映射之前，缩小也是一种最佳实践，因为即使与 gzipping 结合使用，您仍然可以获得一些显着的节省。我们忍受了生产中较差的可读性，因为性能改进是值得的。现在有了源映射，我们就可以鱼与熊掌兼得。这是一篇很好的文章，演示了在大型网站的 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 也做得非常好，所以尺寸该特定缩小策略所节省的费用比完全删除字形的其他策略要少得多。

There's nothing wrong with minification with gzipping, even before modern browsers introduced source maps, minification was a best practice because you can still get some significant savings even when used in conjunction with gzipping. We put up with worse readability on production because the performance improvement was worth it. Now with source maps, we can have our cake and eat it too. Here's a good article demonstrating the effects of combining minification with gzip on html pages for large sites: http://madskristensen.net/post/effects-of-gzipping-vs-minifying-html-files

The difference in savings you get varies very greatly depending on the glyph distribution of the code being minified, so results will vary depending on the minification strategy and the language being minified, and even just depending on coding style. In the average case the savings are still significant.

Minification handles more than just condensing glyphs, it can also restructure the code to remove unneeded characters while achieving the same effect, something that gzipping can't do.

Now, to get back to your specific question, in your case, you want to minify class glyphs. This is harder to do for several reasons. The scoping of those glyphs are between several files, as opposed to it being possible to scope them to local parts of one file. When minifying javascript, global scope variables do not get replaced by default because they may be needed in another script, but with CSS, you don't know what classes are local and which may be defined in another file. To make matters worse, you also need to sync the class replacement to javascript as well, as it's very common to find DOM elements in code via classes. It would be impossible to sync this, as classes may be constructed dynamically in javascript, and even without that issue, it would be a huge ordeal. You can only sync the glyph replacement in javascript if you change your coding style to make sure you explicitly identify where css class strings are being used: https://code.google.com/p/closure-stylesheets/#Renaming

Luckily, glyph replacement is the thing that minification does that gzipping also does very very well, so the size savings from that particular minification strategy is much much less than the other strategies which remove glyphs entirely.

回复收藏 0 原文

还在原地等你 2024-12-21 15:29:41

还有 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

There is also gulp-selectors.

Install it:

npm install gulp gulp-selectors

Now a quick-and-dirty node script:

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

The second argument to gs.run() is in order for it to leave IDs as-is, see also its website: https://www.npmjs.com/package/gulp-selectors

回复收藏 0 原文