Гетсби против Хьюго, подробное сравнение

getsbi protiv hyugo podrobnoe sravnenie

В этой статье я сравниваю два генератора статических сайтов, Gatsby и Hugo. Я обсуждаю знакомство с фреймворком, стабильность, безопасность, инструменты, скорость сборки, производительность и сообщество, окружающее оба. Итак начнем.

Около года назад я изменил свой веб-сайт с WordPress на Hugo, являющийся генератором статических сайтов, написанным на Go, который использует библиотеки шаблонов Go для создания шаблонов. Недавно я оценил жизнеспособность Gatsby, другого генератора статических сайтов, написанного на React, который использует React для шаблонирования.

В этой статье я сравниваю различия между Hugo v0.42 и Gatsby v1.93. Для сравнения я использовал этот сайт Хьюго и этот сайт Гэтсби. Код для каждого из них можно найти на Github для сайта Hugo и Gatsby.

Знакомство с фреймворком

Если вы не знакомы с React и не планируете изучать React, то вам, вероятно, следует выбрать Hugo. Если вы знаете и любите React, стоит ли выбрать Гэтсби? Ну не обязательно.

Я бы утверждал, что вам нужно достойное понимание React (см. Узнайте React с помощью этих ресурсов), если вы хотите использовать Gatsby. А для того чтобы понять React, вам нужно приличное понимание JavaScript (см. Изучение JavaScript с помощью этих ресурсов).

Несмотря на то, что я использую Hugo почти год, мне не нужно было понимать Go. Мне также нужно было немного узнать о библиотеках шаблонов Go. Однако я обнаружил, что мне приходилось почаще обращаться к документации с Хьюго из-за того, что я не знаком. Гэтсби требует более глубокого понимания React, чем Хьюго ожидает от Go. Тем не менее, будь знакомство с фреймворком единственным критерием, я бы выбрал Gatsby, потому что было бы приятно не обращаться к документации во время добавления новых функций на свой веб-сайт.

Стабильность

Одним из способов оценки стабильности было бы сравнить проблемы Хьюго на GitHub с проблемами Гэтсби на GitHub. Вы увидите, что Гэтсби имеет больше возможностей (что увлекательно), но также имеет больше ошибок (что не так интересно). Сначала я не рассматривал стабильность как критерий, пока не нашел эту ошибку, и это заставило меня понять важность стабильности программного обеспечения. Возможно, я воспринимаю это лично через время и усилия, которые я потратил, пытаясь найти эту ошибку, но я все еще считаю, что Хьюго стабильнее Гэтсби.

Безопасность

Gatsby использует JavaScript, а приложения JavaScript известны тем, что для запуска требуется много модулей Node. Существует даже модуль Node, который посылает твиты Hot Pocket, и другой, собирающий номера кредитных карт :D. Статические сайты, как правило, более безопасны по своей природе, но я все же думаю, что стоит упомянуть, что больше зависимостей приводит к увеличению кода, которому вы можете не доверять.

Оснастка

У Гетсби есть все преимущества цепочки инструментов JavaScript и все недостатки усталости от JavaScript. Кроме того, в Гэтсби действительно хорошая библиотека плагинов. В частности, gatsby-plugin-offline позволил мне легко добавлять автономные возможности на свой веб-сайт, о чем я еще не понял из Хьюго.

С другой стороны, некоторые вещи, нуждающиеся в плагине из Гэтсби, просто выходят из коробки из Хьюго. Например, gatsby-plugin-react-helmet необходим для редактирования тега head, тогда как это можно сделать с помощью простого HTML в Hugo. Поскольку мне понравилось использовать инструменты, поставляемые вместе с Гэтсби, я отдаю этот Гэтсби.

Скорость постройки

Hugo может создать мой сайт без каких-либо дополнительных инструментов менее чем за 100 мс. Гэтсби может создать мой сайт примерно за 15 секунд, но это включает много дополнительных инструментов. Добавление PostCSS и Imagemin в сборник Hugo увеличивает время сборки примерно до 5 секунд. Наблюдать за изменениями при разработке также было быстрее с помощью Hugo. Я считаю, что Хьюго здесь победитель.

Документация

И у Гэтсби, и у Хьюго действительно хорошая документация. У Хьюго есть «Быстрый старт», а у Гэтсби – раздел «Начало работы». В Гэтсби также очень хороший учебник, который выравнивает более крутую кривую обучения. Лично мне было легче начать работу с Гэтсби, но потому, что я уже понимал React. Я думаю, что справедливо сказать, что и Хьюго, и Гэтсби имеют отличную документацию.

Производительность

Используя Lighthouse, показатель производительности был 100 для моего сайта в Hugo и 95 для моего сайта в Gatsby. Первое содержание содержимого для подключения 3G длилось примерно 1 секунду для сайта Hugo и 1,5 секунды для сайта Gatsby. С помощью теста веб-страницы время загрузки подключения 2G составляло 8,7 секунды в Hugo и 11,7 секунды в Gatsby.

Однако, проделав простой ручной тест, чтобы увидеть, какой сайт загружается первым, Гэтсби был заметно более быстрым, поэтому я не очень понимаю, что измеряет Lighthouse или Web Page Test. Кроме того, поскольку Gatsby является одностраничным приложением, навигация по веб-сайту не требует запроса от сервера. Страницы просто воспроизводятся с помощью JavaScript. Так или иначе, я могу с уверенностью сказать, что и Хьюго, и Гэтсби скоры. Мне было бы интересно услышать ваше мнение в комментариях ниже.

Гэтсби быстро набирает популярность, сопровождающуюся преуспевающим сообществом. Это не значит, что сообщество Гюго скучно. Если звезды GitHub быть безразличными, то у Хьюго более 27 тысяч, а у Гэтсби – более 23 тысяч. В Twitter Гэтсби, кажется, более активен, чем Хьюго.

Последние мнения

Так какой из них стоит выбрать? Гэтсби использует React, с которым я больше знаком, у него лучшие инструменты и преуспевающее сообщество. С другой стороны, Hugo более стабилен и тратит меньше времени на строительство. Для более крупных веб-сайтов скорость создания становится более важной, и некоторые из вас могут вообще не заботиться о React. В моем случае стабильность была самым важным критерием, поэтому я решил остаться на Хюго. Я очень рад увидеть, что принесет будущее в этом пространстве.

Перед тем как ты уйдешь… Спасибо, что прочли статью! Я пишу о своем профессиональном и образовательном опыте как разработчике программного обеспечения-самоучки, поэтому просмотрите мой блог или подпишитесь на мой информационный бюллетень, чтобы получить больше содержимого.

Вам также может понравиться:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *