Пробелы, удаленные инструментами миниатора, влияют на внешний вид HTML - PullRequest
Новая
       5

Пробелы, удаленные инструментами миниатора, влияют на внешний вид HTML

0 голосов
/ 13 февраля 2019

Обычно мы добавляем пробелы в 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: ")";
}

Пожалуйста, проверьте скрипку здесь - Скрипка

Любые предложения, как избежать таких проблем?

1 Ответ

0 голосов
/ 13 февраля 2019

Можно минимизировать JavaScript и CSS без изменения значения или поведения.Это часто неверно для HTML.

<span> - это формулировка контента, что означает наличие пробелов.На самом деле минимизатор HTML некорректно удаляет все пробелы внутри фраз, потому что вам может понадобиться правило CSS, например white-space:pre.

Строго говоря, минификатор должен выводить: 

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

Даже если ваш минификатор знал о CSS (а это не должно быть, вы можете применить несколько файлов CSS к одному и тому же HTML), он должен сворачивать пробелы в фразе контента, но не удалять их:

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

... эффективный минимизированный эквивалент, предполагающий нормальную обработку пустого пространства CSS.

Вы можете сохранить любой требуемый интервал в фразировке контента, используя &#32; везде, где вы намеренно хотите использовать начальное или конечное пространство, но с точки зрения обслуживания, я думаю, это может потребовать больших усилий.

Минимизация HTML, вероятно, не важна по сравнению с использованием gzip.Безопасная минимизация HTML не сильно экономит трафик, около 5%.Небезопасное минимизация может сэкономить до 25%.Gzip намного лучше и обычно экономит не менее 80%.

...