This content originally appeared on Bits and Pieces - Medium and was authored by Kyle Le
What is TurboPack?
Vercel just introduced Turbopack, an incremental bundler optimized for JavaScript and TypeScript, written in Rust. That Turbopack claimed to be the Successor of Webpack
Developed by NextJS and Webpack creators, Vercel claimed that on large-scale applications, Turbopack updates 10x faster than Vite and 700x faster than Webpack. For the biggest applications the difference grows even more stark with updates up to 20x faster than Vite.
Getting started
Turbopack is currently in alpha. It is not yet ready for production use. But NextJS still allows us to use Turbopack with next dev --turbo then the NextJS v13 development server is now powered by Turbopack
Comparison
Vercel’s marketing campaign has proved its effectiveness with thousands of tweets about Turbopack on Twitter. Although the numbers that Vercel pulled out are very promising, but it is said on “Large Applications”, so how about small to medium applications ? Well let’s find out
I have 2 projects that are exactly same application with same 3rd-party libraries and utilities. One using React with Vite as its bundler, the other one is NextJS with Turbopack.
Let’s start with the bundle size
Turbopack:
Vite:
Without 404 route, only main route, we have 66kb to 86kb. So Turbopack’s bundle size is quite smaller.
Going to the build time
Turbopack:
Vite:
We have 3.52s and 1.61s. Turbopack is twice slower, but we can assume this is because of the auto-generated 404 page, otherwise it’s pretty much the same ?
Startup time
The thing that Turbopack proud the most, that it is built on a new incremental architecture for the fastest possible development experience.
Turbopack:
Vite:
Well maybe that’s almost a fact, Turbopack is indeed over 9x faster boot up time than Vite.
Conclusion
It’s very hard to decide which one is better. We already know Vite with ESBuild is fast enough for 99% of project and got excellent Developer Experience with a lot of plugins. The better bundler is the more suitable bundle with your project in my opinion
Build apps with reusable components like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- The Bit Blog
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Turbopack: Is Vercel's newest toy better than Vite? was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Kyle Le
Kyle Le | Sciencx (2022-10-27T11:20:12+00:00) Turbopack: Is Vercel’s newest toy better than Vite?. Retrieved from https://www.scien.cx/2022/10/27/turbopack-is-vercels-newest-toy-better-than-vite/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.