Porównanie generatorów stron statycznych ze zmierzonymi czasami budowania
Porównanie generatorów stron statycznych
Porównanie generatorów stron statycznych: Astro vs Hugo vs Eleventy, czasy budowania | We.Inc
Porównanie Astro, Hugo, Eleventy, statycznego eksportu Next.js i Jekylla: czasy budowania zmierzone na tych samych 1,000 postach Markdown, tabela funkcji i ten sam szablon posta w każdym narzędziu.
Generator stron statycznych zamienia pliki Markdown i szablony w zwykłe pliki HTML podczas budowania, które każdy hosting lub CDN może szybko serwować. Hugo buduje najszybciej; w naszym teście zamienił 1,000 postów w strony w mniej niż pół sekundy. Eleventy jest najbardziej elastyczny, a Astro sprawdza się najlepiej, gdy niektóre części wymagają interaktywnych komponentów.
Wybór w jednej linii
Jeśli
Użyj
Chcesz najszybszego budowania dla tysięcy stron
Hugo
Chcesz czystego JavaScriptu i niewielu narzuconych reguł
Eleventy
Potrzebujesz kilku interaktywnych komponentów
Astro
Masz już kod w React lub Next.js
Next.js static export
Daliśmy Astro, Eleventy i Hugo te same 1,000 postów Markdown i zmierzyliśmy po trzy czyste budowania każdego z nich, więc liczby są porównywalne. Pod wynikami ta sama strona posta w każdym narzędziu pokazuje, jak się z nim pracuje.
Pisz treść jako pliki Markdown z front matter.
Napisz szablon, który opakowuje każdy post w układ Twojej strony.
Uruchom budowanie; każdy plik staje się stroną HTML.
Wgraj folder wynikowy na dowolny hosting statyczny lub CDN.
Czas budowania ma największe znaczenie przy dużych witrynach i wdrożeniach podglądowych; poniżej kilkuset stron wszystkie te narzędzia są szybkie.
Nie trzymaj obrazów w folderach Markdown kopiowanych bez zmian; pozwól, aby potok obrazów narzędzia zmieniał ich rozmiar.
Od początku dodaj mapę witryny i kanoniczne adresy URL; większość generatorów ma wtyczkę do obu.
Dla redaktorów nietechnicznych połącz generator z CMS-em headless lub opartym na Git.
Najczęściej zadawane pytania
Czym jest Jamstack?
To sposób budowania witryn jako gotowych plików HTML, CSS i JavaScript serwowanych z CDN, z funkcjami dynamicznymi dodawanymi przez API. Generatory stron statycznych tworzą tę gotową część.
Czy Hugo jest szybszy od Astro?
Dla zwykłych stron Markdown tak, i to z dużą przewagą w naszym teście: około 0.3 sekundy wobec około 1 sekundy dla 1,000 postów po rozgrzaniu. Astro robi więcej na każdą stronę, na przykład sprawdza typy treści i renderuje komponenty.
Czy strona statyczna może mieć formularze i wyszukiwarkę?
Tak. Formularze mogą wysyłać dane do usługi formularzy lub funkcji serverless, a wyszukiwanie może działać w przeglądarce na podstawie gotowego indeksu. Żadne z nich nie wymaga tradycyjnego serwera.
Czy strona statyczna jest dobra dla SEO?
Bardzo. Każda strona to kompletny HTML przy pierwszym wczytaniu, szybki w serwowaniu i łatwy do odczytania dla robotów. Nadal potrzebujesz dobrych tytułów, opisów, linków wewnętrznych i mapy witryny.
Kiedy nie używać generatora
Jeśli osoby aktualizujące witrynę nie czują się pewnie z Markdownem i Gitem, hostowany kreator stron lub CMS z edytorem wizualnym oszczędzi wiele prowadzenia za rękę. Generatory sprawdzają się najlepiej, gdy witryną zarządzają programiści albo gdy treść dostarcza im CMS.
Zmierzone czasy budowania
Te same 1,000 postów w każdym narzędziu, wynik usuwany przed każdym uruchomieniem. Kolejne uruchomienia są szybsze, ponieważ narzędzia i system operacyjny mają rozgrzane pamięci podręczne.
Pomiar: 1,000 postów Markdown do HTML (sekundy)
Generator
Pierwsze uruchomienie
Kolejne uruchomienia
Hugo 0.167
Eleventy 3.1
Astro 7.3
0.97 do 1.01
Jak wypadają w porównaniu
Obok siebie
Astro
Hugo
Eleventy
Next.js export
Jekyll
Język
JavaScript / TypeScript
Go (pojedynczy plik binarny)
JavaScript
JavaScript / TypeScript
Ruby
Szablony
.astro, a także React, Vue, Svelte
Szablony Go
Nunjucks, Liquid, WebC, JS i inne
React
Liquid
JavaScript wysyłany domyślnie
Brak
Brak
Brak
Środowisko uruchomieniowe React
Brak
Części interaktywne
Wyspy z dyrektywami client
Dodaj własne skrypty
Dodaj własne skrypty lub WebC
Dowolny komponent React
Dodaj własne skrypty
Licencja
MIT
Apache-2.0
MIT
MIT
MIT
Najlepszy do
Witryn z treścią, które potrzebują kilku interaktywnych części
Bardzo dużych witryn, szybkiego budowania
Elastycznych, minimalistycznych witryn
Zespołów React, które chcą statycznego wyniku
Blogów na GitHub Pages
Ta sama strona posta w każdym narzędziu
Astro: strona posta z kolekcji treści
Kolekcja sprawdza front matter każdego posta względem schematu, a getStaticPaths tworzy jedną stronę na post podczas budowania.
Eleventy: układ dla każdego posta w folderze
Plik posts.json w folderze stosuje układ do każdego pliku Markdown w środku, dzięki kaskadzie danych Eleventy.
Hugo: szablon pojedynczej strony
Hugo wybiera ten szablon dla każdej strony w content/. .Content to wyrenderowany Markdown.
Next.js: eksport statyczny
Ustawienie output na export zapisuje zwykłe pliki HTML do folderu out podczas budowania. Funkcje wymagające serwera, takie jak server actions i renderowanie na żądanie, nie są dostępne w tym trybie.