Минификация CSS - это процесс удаления большого количества пробелов и пустых строк в наших файлах CSS. Пробелы полезны для людей, чтобы легко читать код, но они не нужны компьютерам и приводят к тому, что файлы намного больше, чем они должны быть, а файлы большего размера = медленная загрузка = долгое время ожидания для пользователей.
Minify
Hugo предоставляет возможность минимизировать пользовательские файлы CSS, точно так же, как мы только что рассмотрели его возможность сжимать изображения.
Ранее мы создали файл styles.css в нашей папке static. Если этот файл все еще пуст, тебе не нужно ничего делать, но если ты написал(а) некоторый CSS, выполни следующие действия:
- Перемести файл
styles.cssиз папкиstaticв папкуassets - Открой
baseof.htmlи замени строку<link rel="stylesheet" href="/styles.css">следующим:
{{ $style := resources.Get "styles.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
Теперь наши стили будут обрабатываться Hugo, и Hugo создаст новый файл, когда мы соберем и развернем наш сайт, этот новый файл будет минифицирован и идентифицирован, чтобы избежать проблем с кешем браузера.
Fingerprint
Функция fingerprint создается для предотвращения кэширования нашего CSS браузерами при его изменении. Обычно браузеры загружают файл CSS и хранят его в кеше (или в памяти), поэтому следующая страница, загруженная с тем же файлом CSS, будет загружаться намного быстрее. Для этого браузер использует имя файла, поэтому, если имя не меняется, он не загружает файл повторно.
Но что, если мы что-то изменим внутри файла и развернем на нашем сервере? Браузер не обнаружит это, потому что имя не было изменено. Таким образом, fingerprint - это способ обойти это. Функция добавляет случайную строку цифр и букв к имени файла, чтобы браузер знал, когда обновить свой кеш.
Теперь наш файл styles.css будет выглядеть так: styles.sdfgj12344sfg.css, и браузер повторно загрузит его с нашего сервера, как только он изменится.