The Need for Speed: Why Eleventy Leaves Bundlers Behind

Eleventy is a static site generator built for speed, and the reason it can deliver is that it leaves a bundler behind, said Eleventy creator Zach Leatherman, in an interview with The New Stack.

“The real reason that Eleventy is, in many ways, a lot faster than a lot of the competitors we have in the same spaces, is that we don’t use a bundler,” Leatherman told The New Stack. “We’re not strictly tightly coupled to a bundler.”

Leatherman’s Case against Bundlers

A lot of site generators do use a bundler, he added. For example, Next.js used Webpack but is pivoting to Turbopack. Vite is another popular bundler, which Eleventy does support with a plugin.

“But the more work you do in your build, the slower it is, and that’s just kind of how it is,” Leatherman said. “We’re trying to bet on the post-bundler phase of development and the trend kind of oscillates back and forth between what you need a bundler to do and what you don’t need a bundler to do.”

Static site generators use HTML, CSS and JavaScript to create large websites, automating the page creation. Other site generators that compete with Eleventy include Astro, Gatsby, Next.js, Next, Remix and SvelteKit.

Leatherman has run tests that showed Eleventy version 1 ran faster than most competitors, building ×4000 markdown files in 1.93 seconds compared to 22.90 seconds for Astro, 29.05 seconds for Gatsby and 70.65 seconds for Next.js. Only Hugo, at 0.68 seconds, beat Eleventy.

As web standards improve over time, the need for features supported by a bundler decreases, he explained. One example: ECMA script modules. A few years ago, many bundlers were transforming code that was using ECMAScript modules to a more broadly accessible form of JavaScript. But as web standards evolved and browsers improved and adopted those things natively into the browser, it was no longer necessary for a bundler to support those features, he said. Often, “expensive” features go into a bundler to handle use cases that aren’t even relevant anymore, he added.

“My argument is that you don’t need a bundler,” he said. “For most web development use cases, a bundler is not necessary. Now, you can use a bundler with Eleventy if you’d like to integrate those two things together. But I’ve been building sites for years and years and years and, yeah, I would argue that the churn and the performance hit that you get from a bundler in many sites, and many use cases is not worth it.”

Eleventy uses Node.js as its runtime, so that must be installed to run Eleventy. Then it’s installed via npm, which is bundled with Node.js. Eleventy is run through the command line.

“We want to be one layer above just writing an HTML file in your editor,” Leatherman said. “Eleventy will allow you to automate some of the things that go into building a website.”

For instance, Eleventy will repeat a header or footer in a scripted way so that the developer doesn’t have to copy and paste the code.

Eleventy is sponsored by Netlify but owned by Leatherman. Version 2.0 was officially released on Feb. 8; it included only a few updates from the beta because Leatherman was already working with canary versions of the software over the past year.

“I’ve been using it in production for a very long time and working on it in the pre-release, canary versions really allowed me to do live iterations with production sites,” he said. “The thing that folks like about Eleventy is that it’s very stable. A lot of folks that have come back to projects that were using older versions of Eleventy to upgrade to Eleventy 2.0 have said that it was a very seamless upgrade, and they didn’t have a ton of development that needed to go into that upgrade process.

“Stability is kind of a hard thing to sell, but our track record of being a five or six-year-old project now and really delivering value to folks over those five or six years speaks for itself,” he added.

New Dev Server and Web Components

One update that did ship was a new dev server.

“That allowed us to get rid of a lot of dependency weight, so a lot on the size of Eleventy as people installed on their computer,” Leatherman said. “So Eleventy is much more lightweight when you install it. I think it’s something like 34 megabytes when you install it now instead of 150 megabytes.”

Another update that excites Leatherman is the new WebC file format, which stands for “web component” and includes a number of benefits, including support for streaming on the edge.

“The JavaScript ecosystem has really gone really hard into third-party or independent component frameworks. So your React, your Angular, those are all sort of things that exist independent of the platform, independent of web standards,” he said. “They exist a layer above and there has been a lot of tension between web components and the web standards folks, and the framework library folks as well. There’s been a fair amount of disagreement between those two teams as to what component frameworks should look like when it comes to being part of the platform and part of web standards.”

WebC is trying to bridge the gap between those two worlds, he explained.

“We can have as much long-term benefit from the platform without getting into the same churn problems or heavy JavaScript problems that we see from a lot of JavaScript frameworks today,” he said.