Next.js

Next.js: SWC Polyfill Power-Up and Future Performance Gains

A major development day with 18 merged PRs bringing automatic polyfill support through experimental.swcEnvOptions, significant Turbopack performance optimizations, and improved developer experience features. Key contributors include banchichen adding SWC preset-env configuration, sokra with custom Future implementations for better performance, and lukesandberg optimizing memory usage in Turbopack.

Duration: PT3M57S

https://podlog.io/listen/next-js-36fde2ae/episode/next-js-swc-polyfill-power-up-and-future-performance-gains-c46b238a

Transcript

Hey there, Next.js developers! Welcome back to another episode of the Next.js podcast. I'm your host, and wow, what a packed day we have to dive into! April 4th brought us eighteen merged pull requests and a whole lot of exciting improvements that I can't wait to share with you.

Let's jump right into the big story of the day - and this one's pretty exciting if you've ever wrestled with polyfills. Banchichen just landed a fantastic new feature called experimental.swcEnvOptions that brings automatic polyfill injection back to Next.js! Remember how we used to have this with Babel's preset-env? Well, now SWC can do it too.

Here's what makes this so cool - instead of manually importing core-js and bloating your bundle, or switching back to Babel and losing SWC's speed, you can now configure automatic polyfills right in your Next config. Just add experimental.swcEnvOptions with mode set to 'usage' and specify your core-js version, and boom - only the polyfills you actually need get injected. It's like having your cake and eating it too - SWC performance with smart polyfill injection.

Now, speaking of performance, Tobias Koppers has been doing some serious under-the-hood optimization work. He replaced a bunch of async functions with hand-written Future implementations, and I know that sounds super technical, but here's why you should care - it makes the binary smaller and more predictable. We're talking about a 428 kilobyte reduction in binary size. That might not sound huge, but every optimization adds up to a faster, leaner Next.js.

Luke Sandberg also contributed some really clever memory optimizations in Turbopack. He switched to zero-copy deserialization for filters, which basically means less memory copying and better performance when the system is under pressure. The OS can now manage memory more efficiently, and one project saw a 40 megabyte reduction in memory usage. That's the kind of optimization that makes your builds smoother when you're working on larger projects.

But it's not all about performance today - we got some great developer experience improvements too. Benjamin Woodruff added a feature that automatically restarts your dev server if the .next directory gets deleted. You know how sometimes things get weird and you just want to nuke that folder and start fresh? Well, now Next.js is smart enough to detect that and restart itself. No more mysterious errors when your build cache disappears.

And here's a small but thoughtful change - the error message when you try to start a dev server while one's already running got much better. Instead of just telling you to kill the existing process, it now suggests you might want to just access the running server instead. It's one of those little touches that shows the team really thinks about the developer experience.

We also saw some important reliability fixes. There was a revert of a session management feature that was causing memory issues in some applications, and fixes to ensure ISR revalidation errors get properly reported. These might not be flashy features, but they're the kind of stability improvements that make your production deployments more reliable.

Today's Focus: If you're dealing with polyfill headaches in your current projects, definitely check out that new experimental.swcEnvOptions feature. It could save you from some bundle bloat while keeping your builds fast. And if you're working on larger applications, keep an eye on how these Turbopack optimizations affect your build performance - you might notice things feeling a bit snappier.

The Next.js team continues to impress with this balance of new features and performance work. It's clear they're not just adding bells and whistles - they're building a more robust, efficient framework that scales with your needs.

That's a wrap for today's episode! Thanks for tuning in, and keep building amazing things with Next.js. We'll catch you next time with more updates from the fast-moving world of React development. Until then, happy coding!