Vite 8 Introduces Rolldown: A Rust-Powered Bundler Revolution

Enhancing Your Bundler: Vite 8 Edition

Vite 8 has released its first beta, bringing a monumental change: Rolldown. This blazing-fast, Rust-based bundler has been years in the making for the Vite team. While an opt-in feature in Vite 7, it's now ready for primetime, prompting the question: why was it developed?

Historically, Vite relied on two distinct bundlers: esbuild for rapid development compilation and Rollup for production-grade bundling, chunking, and optimization. This strategy allowed Vite to offload parsing and bundling, focusing instead on the exceptional developer experience and orchestration it's known for. However, managing two separate bundling pipelines proved challenging, necessitating separate transformation stages, different plugin systems, and increasing "glue code" to keep behavior consistent.

In response, the Vite team embarked on building their own custom bundler, Rolldown, from the ground up. The result offers significant advancements:

• Unrivaled Speed: Written in Rust, Rolldown operates at native speeds, matching esbuild's performance and outperforming Rollup by 10–30 times.
• Seamless Compatibility: It supports the same plugin API as Rollup and Vite, ensuring most existing Vite plugins function out-of-the-box with Vite 8.
• Expanded Features: Rolldown unlocks advanced Vite capabilities, including a full bundle mode, more flexible chunk split control, and module federation.

The most substantial impact of Rolldown is the complete control it grants Evan You and his team over an end-to-end JavaScript toolchain. This ecosystem now encompasses Vite as the build tool, Rolldown as the bundler, and Oxc as the compiler. This unified approach is a strategic move for VoidZero (the VC-backed company they founded) and promises a more cohesive and enhanced experience across the entire stack for developers.

Our Friends

Build Your Own Convex Components

Convex now enables developers to create and package Convex functions, schemas, and persistent state into reusable modules. These modules can be easily integrated into projects by you or other developers.

Unlike traditional libraries, Convex Components function more like "mini Convex apps." They allow you to share common backend functionalities such as rate limiting, data aggregation, and AI agents across various projects.

With Convex Components, you can:

• Persist data to tables with schema control.
• Isolate data access behind an API boundary.
• Define queries, mutations, and actions that can execute asynchronously.

Watch this quick YouTube demo to learn how to build your own backend components from scratch using Vite + Convex.

Spot the Bug

Sponsored by Callstack

VR is the next frontier for React Native devs - watch and learn why.

function differenceInMilliseconds(date1, date2) {
  const { getTime: getTime1 } = new Date(date1);
  const { getTime: getTime2 } = new Date(date2);
  return getTime1() - getTime2();
}

differenceInMilliseconds('2021-01-01', '2021-01-02');

Cool Bits

• Zig Language Migration: Zig has moved its repository from GitHub to Codeberg, citing political reasons and frustrations with "inexcusable bugs." Codeberg subsequently faced a DDoS attack.
• Language Comparisons: Sinclair Target offered insights on the comparisons between Go, Rust, and Zig.
• Enterprise AI Guide: Most AI projects encounter implementation failures. Augment Code provides a Guide to Closing the Enterprise AI Failure Rate Gap, detailing infrastructure patterns, monitoring architectures, and deployment strategies for scalable AI. [Sponsored]
• React Security Vulnerability: The React Team announced an unauthenticated remote code execution vulnerability in RSC. Users are advised to upgrade React projects immediately, unless they are still on a version prior to React 19.
• Nixtml Static Site Generator: nixtml is a static site generator built with Nix.
• TypeScript 7 Update: Daniel Rosenwasser shared an update on TypeScript 7, codenamed "Project Corsa."
• QA Services by CarbonQA: CarbonQA offers high-quality QA services for development teams. Their US-based testers integrate with existing tools and communication channels, allowing developers to focus on feature building. [Sponsored]
• npm Publishing Security: Zach Leatherman provided security suggestions for locking down npm publishing workflows. This helps prevent malicious packages, humorously referred to as "Shai Halud 3: The Return of the Worm," from infecting the ecosystem.
• Anchor Positioning: Bramus discussed the most likely reasons for unexpected anchor positioning behavior.
• JavaScript's 30th Birthday: JavaScript recently turned 30. To celebrate, revisit this story Bytes wrote for JavaScript's 25th birthday, which was also issue #25 of Bytes.

Spot the Bug: Solution

Sponsored by Callstack

function differenceInMilliseconds(date1, date2) {
  const t1 = new Date(date1).getTime();
  const t2 = new Date(date2).getTime();
  return t1 - t2;
}

differenceInMilliseconds('2021-01-01', '2021-01-02');

In JavaScript, class methods are not direct properties of an instance but rather belong to the class’s prototype. When attempting to destructure a method like getTime, you are trying to extract it directly from the instance, which fails because getTime is not a direct property. Conversely, new Date().getTime() works correctly because JavaScript traverses the prototype chain and successfully locates getTime on the Date prototype.