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.”
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.
“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.
WebC is trying to bridge the gap between those two worlds, he explained.