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

Question

我们通常在HTML中添加空格以使其可读

示例– 开发版本：

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

当上述代码最小化（用于生产产品）时，我们得到以下输出

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

现在，考虑将伪元素添加到“环绕括号”类中。以下是CSS

.surround-brackets::before {
    content: "(";
}

.surround-brackets::after {
    content: ")";
}

请在此处检查小提琴-Fiddle

任何建议如何避免此类问题？

Answer 1

可以最小化JavaScript和CSS而不会不利地改变含义或行为。对于HTML常常不是这样。

<span>是措辞内容，这意味着空格很重要。对于HTML缩小器来说，从措辞内容中删除任何空格实际上是不正确的，因为您可能希望使用white-space:pre之类的CSS规则。

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

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

即使您的minifier知道了CSS（本来不是应该的，您也可以将多个CSS文件应用于同一个HTML），它也应该在措辞内容中折叠空白行，但不要剥离它们：

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

...假定常规CSS空白处理的有效最小等效项。

您可以在有意要使用前导或尾随空格的任何地方使用 来保留措辞内容中任何所需的空格，但是从维护的角度来看，我认为这可能会很大。

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