Должен ли Normalize.css храниться как отдельный файл или скомпилирован (через postcss @import) в окончательный файл styles.css?
С точки зрения производительности / скорости конечного продукта и в соответствии с лучшими практиками - следует ли Normalize.css хранить в виде отдельного файла (ссылка на который содержится в заголовке HTML) или лучше скомпилировать его в окончательный файл.css?
Я искал здесь и на многих других сайтах, но не смог найти ответ. Надеюсь, вы поймете мою дилемму с этим:
1. Оставьте файл normalize.css в папке node-modules и укажите ссылку на него в нашем html. Я все еще новичок в кодировании, но если я правильно понимаю с этим подходом, мы добавим еще один (может быть, ненужный?) Запрос к серверу в дополнение к нашему файлу main.css? Насколько это плохо или как это влияет на производительность / время загрузки сайта?
<link rel="stylesheet" href="../node_modules/normalize.css/normalize.css">
<link rel="stylesheet" href="temp/styles/styles.css">
С другой стороны, мы можем:
2. используйте 'postcss-import', чтобы импортировать normalize.css с другими модулями и собрать их все вместе в один окончательный файл.css.
Хорошо, теперь у нас есть все в одном месте, но мы только что добавили 451 строку кода (и комментарии) перед первой строкой нашей нашей действительной CSS. С точки зрения читабельности это не кажется мне лучшим решением, но теперь сайт будет загружаться немного быстрее?
Отказ от ответственности: я использовал второй подход до сих пор, но я начал спрашивать себя, является ли это оптимальным решением.
Заранее спасибо.
2 ответа
Вы совершенно правы, утверждая, что веб-страница будет загружаться быстрее, если при загрузке будет меньше запросов к серверу. Вы также правы, утверждая, что объединенный файл менее читаем, чем отдельные файлы, загружаемые отдельно.
Что для вас важнее в вашей ситуации - это вопрос, на который вы можете ответить только вы. Вот почему вам трудно найти окончательный совет.
Лично я использую опцию отдельных файлов при разработке, чтобы файлы было легко читать и отлаживать. Скорость загрузки не так важна на компьютере разработчика.
На производственных сайтах я использую комбинированный файл. На самом деле, я использую комбинирование и минимизацию, чтобы уменьшить количество загружаемых файлов и сохранить размер этих файлов как можно меньше. Читаемость менее важна в этой ситуации.
В идеале добавление normalize.css к вашему окончательному css должно быть выполнено на шаге постобработки, который объединяет все ваши исходные файлы в один файл и минимизирует все это. Таким образом, ваш источник все еще читабелен, но в итоге вы загружаете только один файл.