缩小工具删除的空白会影响 HTML 的外观和感觉

Question

我们通常在 HTML 中添加空格以提高可读性

\n\n

示例 \xe2\x80\x93 \n开发版本:

\n\n

<div>\n    <span class="surround-brackets">\n        Title\n    </span>\n</div>\n

\n\n

当上面的代码最小化时（对于产品构建），我们得到以下输出

\n\n

<div><span class="surround-brackets">Title</span></div>\n

\n\n

现在，考虑我们在类 \xe2\x80\x9csurround-brackets\xe2\x80\x9d 中添加了一个伪元素。以下是CSS

\n\n

.surround-brackets::before {\n    content: "(";\n}\n\n.surround-brackets::after {\n    content: ")";\n}\n

\n\n

请在这里查看小提琴 - Fiddle

\n\n

有什么建议如何避免此类问题吗？

\n

Answer 1

可以缩小 JavaScript 和 CSS，而不会对含义或行为产生不利的影响。对于 HTML 来说，情况通常并非如此。

<span>是措辞内容，这意味着空格很重要。HTML 缩小器从短语内容中删除任何空格实际上是不正确的，因为您可能需要像white-space:pre.

严格来说，缩小器应该输出：

<div><span class="surround-brackets">
        Title
    </span></div>

即使你的压缩器知道 CSS（它不应该知道，你可以将多个 CSS 文件应用到同一个 HTML），它也应该折叠短语内容中的空白，而不是删除它们：

<div><span class="surround-brackets"> Title </span></div>

...假设正常 CSS 空白处理的有效缩小等效项。

您可以通过在您有意想要的前导或尾随空格的任何地方使用来保留措辞内容中任何想要的间距 ，但从维护的角度来看，我认为这可能需要付出很大的努力。

与使用 gzip 相比，缩小 HTML 可能并不重要。安全缩小 HTML 并不会节省太多带宽，大约为 5%。不安全的缩小最多可节省 25%。Gzip 更好，通常可以节省至少 80%。