minifier工具删除的空白区域会影响HTML的外观

Question

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

示例 - 开发版本：

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

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

<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 minifying实际上从短语内容中删除任何空格实际上是不正确的，因为您可能需要像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％。