Zach’s ugly mug (his face) Zach Leatherman

The JavaScript Site Generator Review, 2023

February 24, 2023 On Mastodon

It’s time again for every framework author’s favorite: The JavaScript Site Generator Review, February 2023 edition.

Here is the list of site generators reviewed in alphabetical order:

  • Astro 2.0.15
  • Eleventy 2.0.0
  • Enhance 1.4.6 (added 27 February 2023)
  • Gatsby 5.7.0
  • Next.js 13.2.1
  • Nuxt 3.2.2
  • Remix 1.13.0
  • SvelteKit 1.8.3

Each example site was created using a fresh run of the Quick Start or Getting Started tutorial on each respective generator’s web site.

Previous Reviews

npm install Times

Times shown are in seconds. Lower is better.

Expand to show table of results
Framework npm install Time
Astro 2.0.15 12.52
Eleventy 2.0.0 5.81
Enhance 1.4.6 29.71
Gatsby 5.7.0 43.36
Next.js 13.2.1 3.72
Nuxt 3.2.2 14.77
Remix 1.13.0 40.14
SvelteKit 1.8.3 6.78

Notes:

  • Each tool was installed five times and the average of those five runs is shown above.
  • npm cache clean --force was used to clean the cache before each install.
  • npm auditing was enabled for these tests.
  • Next bundles all of its dependencies (save for react and react-dom) and as such bypasses for-free minor dependency releases and most of the auditing functionality provided by npm.

Client JavaScript Baseline

Weights shown are in kilobytes of uncompressed resource size (not transfer size).

Expand to show table of results
Framework Client JavaScript Baseline (kB)
Astro 2.0.15 0
Eleventy 2.0.0 0
Enhance 1.4.6 0
Gatsby 5.7.0 210
Next.js 13.2.1 248
Nuxt 3.2.2 191
Remix 1.13.0 228
SvelteKit 1.8.3 53

node_modules Weight

Weights shown are in megabytes.

Expand to show table of results
Framework node_modules Weight (MB)
Astro 2.0.15 169
Eleventy 2.0.0 34
Enhance 1.4.6 210
Gatsby 5.7.0 583
Next.js 13.2.1 158
Nuxt 3.2.2 164
Remix 1.13.0 497
SvelteKit 1.8.3 111

npm Auditing

Some frameworks use create-* packages (sometimes with npm init) and include a step that helpfully installs your npm dependencies for you. However, some of these tools also hide npm auditing results (including those about high severity security vulnerabilities).

These tools hide npm audit reports:

  • Astro ⚠️
  • Gatsby ⚠️
  • Next ⚠️ (via bundling its dependencies)

These tools show standard npm audit reports during project creation:

  • Eleventy ✅
  • Enhance ✅
  • Nuxt ✅
  • Remix ✅
  • SvelteKit ✅

Telemetry

Telemetry is the practice of collecting anonymous data on usage of the tool. Some tools have this enabled (opt-in) by default and require an opt-out. This isn’t necessarily bad but some folks are very surprised by this default (and education here is important as this default may not comply with your organization’s security policies).

These tools require you to opt-out of Telemetry:

  • Astro ⚠️
  • Next.js ⚠️
  • Gatsby ⚠️

Has Telemetry but it prompts you to ask:

  • Nuxt (see additional nuance below)

No known Telemetry or data collection:

  • Eleventy ✅
  • Enhance ✅
  • Remix ✅
  • SvelteKit ✅

February 28, 2023 this note was updated with more accurate information on Nuxt with help from Nuxt maintainers.

Notably and delightfully, Nuxt prompts to ask if you want to participate in Telemetry when you first run the development server. This is a global preference and you will only be prompted once; it applies to all Nuxt projects on your machine (stored in a ~/.nuxtrc file).

This prompt is still technically opt-out when using the development server. The default answer to the prompt is Yes, to participate in telemetry. But the prompt does not execute on deployment servers and CI pipelines, so it’s actually opt-in in those contexts. To me this seems like a well-executed middle ground.

Feedback

Let me know if you have feedback—I’d also welcome recommendations on aspects of these tools that you’d like to see reviewed for next time!


< Newer
Flex Luthor, a Little CSS Flexbox Layout Helper
Older >
'Could not find Chromium' with Puppeteer 19

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 77 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

70 Reposts

IndieWeb Avatar for https://www.imoneyhub.com현빈 | HyunbinFrontend DogmaFullStack BulletinHack DesignMarc GrabanskiYohann Ciurlik 🤖Takahiro SHINODAAdamGokulCharles SchmidtSpeckyboyIndieWeb Avatar for https://lootrunners.comIndieWeb Avatar for https://dcdailystory.comIndieWeb Avatar for https://laurelnewsstation.comWilliam OliveiraFrontend DogmaWorkafrolic (±∞)Frontend DogmaJoulseOlivier ForgetAdrian CochraneIndieWeb Avatar for https://leedonss.comIndieWeb Avatar for https://www.recentic.netIndieWeb Avatar for https://zampoint.comIndieWeb Avatar for https://dcreationsllc.comIndieWeb Avatar for https://www.worldnewstrends.netIndieWeb Avatar for https://alvarogpalacio.comIndieWeb Avatar for https://technsavi.comIndieWeb Avatar for https://mikesmediahouse.co.zaIndieWeb Avatar for https://assuagetech.netIndieWeb Avatar for https://theprogrammernewshubb.comIndieWeb Avatar for https://moregogiga.comIndieWeb Avatar for https://us.fourdotsdesign.comIndieWeb Avatar for https://gripp-d.nlIndieWeb Avatar for https://www.askorhelp.comIndieWeb Avatar for https://desainae.comIndieWeb Avatar for https://brisk-web-services.comIndieWeb Avatar for https://speckyboy.comShane AfsarMykal MachonStefan DillingerenhanceSimon MacDonalddanIndieWeb Avatar for https://sharewaredepo.comMattMartin BBasix@hachyderm.ioZach Leatherman :11ty:Schalk Neethling 🇺🇦~/j4v1WebPerformance Reportnopefish :blobcatcomfcool:AraTimo TijhofTanner HodgesEleventy 🎈 v2.0.0EvanBastian AllgeierFynn BeckerMatthias OttMatt WilcoxElly Loel ✨🌱Bastian BeuttelBrett NelsonAlex RussellSimon St.LaurentjamiedixonJean Pierre Kolb

40 Likes

Lars ????️‍????ThomBoris MannOlivier Forgetjalciné needs a job but alsoeswat42wesruvMykal MachonFlorian GeierstangerStefan DillingerRobert KatzkiAndrew ChouAyoJamesSchalk Neethling 🇺🇦WebPerformance ReportGino 🎧🇺🇦 gryzzlykinghatDaniel SaundersDjwebdroidNatik Gadzhieswat42EvanNathan BottomleyMatthias OttFynn BeckerJohanEgor KloosIVX :verified:Elly Loel ✨🌱Kyle JohnstonAlex RussellJason Brownaudyadron :pensive_party_blob:Simon St.LaurentJeffrey LembeckjamiedixonJean Pierre Kolb
14 Comments
  1. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    (it has evolved to its final form: the blog post)

  2. Matthias Ott

    Matthias Ott

    @zachleat (good)

  3. Alex Russell

    Alex Russell

    @zachleat per other thread, would love to see gzip sizes for default JS, and also, is this a script I can run? If not, would you like for one to exist?

  4. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @slightlyoff whew, yes—I would love to have this automated.I don’t think it would be maintainable to do so, unfortunately, I’d expect a fair bit of churn in framework “Getting Started” happy paths?Certainly not worth it for how often I do these (once or twice a year)

  5. Alex Russell

    Alex Russell

    @zachleat will noodle on it

  6. Steffen

    Steffen

    @zachleat Hmmm I guess I have some objections regarding the client side JS part. I think those which ship client side bundles here shouldn’t be compared to those which don’t, just like that. They represent a different architectural style.Some words about that … that it’s not appl… Truncated

  7. Steffen

    Steffen

    @zachleat Apart from that it’s nice to see those comparisons nevertheless! Thanks!

  8. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @tevo ah—just to be clear I don’t accept “sites versus apps” as a useful dichotomy when building things for the web—and further I would argue that this divide has done great damage!I might also say it like this, a bit more cheekily: https://www.zachleat.com/twitter/15393323225495… Truncated

  9. Brian LeRoux 💚

    Brian LeRoux 💚

    @andy if remix counts why would enhance.dev not count ? Idk fwiw (cc @zachleat )

  10. Andrew Walpole

    Andrew Walpole

    @brianleroux @andy @zachleat Too many level heads, not enough #hotdrama twitter marketing 🌶️ hotdrama

  11. Brian LeRoux 💚

    Brian LeRoux 💚

    @walpolea @andy @zachleat we all like html here now I think if I read the drama correct 💀

  12. Zach Leatherman :11ty:

    Zach Leatherman :11ty:

    @krinkle @slightlyoff I did this with my markdown benchmark last year since it was doing build performance. If folks are interested in another repo of starters I can open source it but I didn’t do it this time because I wasn’t running any build performance tests? Maybe that separ… Truncated

  13. gotofritz

    gotofritz

    @zachlEaT Is "node_ModULES wEIGhT" rEAllY SOMetHiNg wOrth MeaSUring and WORryiNG abOut?

  14. Sasa

    @cvekaso

    lol, this made me recheck who wrote the article zachleat.com/web/site-gener… 😅

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)