What is Evan You doing by creating VoidZero, and what are the issues with JS toolchains?

Hi there, my name is Fupeng Wang.

I am a senior full-stack engineer, and author of a 17.5k open-source project, PMP. Now I am developing a Notion-style knowledge base
HuashuiAI including AI writing and collaboration, using React Nextjs and Supabase.

Evan You and VoidZero

Two months ago, Vue and Vite author Evan You announced the establishment of VoiceZero company and received millions of dollars in investment.

VoidZero will be based on Vite and develop two major tools, Rolldown and Oxc, to unify the front-end JS toolchain. Resolve issues such as fragmentation, incompatibility, and low efficiency.

The VoidZero core tool is developed in Rust language, with high running efficiency and fast speed.

What are the issues with JS toolchains

The JS toolchain mainly includes processes such as semantic analysis, transformer, linter, transformer, minifier, bounder, etc.

How are we currently using these types of tools? What tools are currently available? What is the relationship between them? Are they really inefficient and fragmented? Let's introduce them one by one below.

Note that their relationship is somewhat chaotic, with some being able to compile and package, and having a lot of overlapping functions, so there is no need to forcefully classify and compare them.

JS runtime

The so-called runtime refers to the runtime environment of a language. If there is no runtime, then a language is just a string or string file that cannot be parsed and run.

• Nodejs is the most common JS runtime, which is stable, mature, and has a very rich ecosystem.
• Deno is a JS runtime developed in recent years, focusing on TS support and network security. It received a $20M investment in the first two years and recently released Deno 2.0, which is currently developing rapidly
• Bun JS runtime， Focus on performance and all-in-one

// Nodejs Deno 或 Bun，都是写 JS 代码
const server = Bun.serve({
  port: 3000,
  fetch(request) {
    return new Response("Welcome to Bun!");
  },
});

console.log(`Listening on localhost:${server.port}`);

Note: The JS runtime is not a part of the JS toolchain, it is just the most basic capability, but understanding these tools and terms can help distinguish them from the JS toolchain. You may not have used it, but you need to know its existence and what it does.

Parser/Compiler

Web front-end development needs to consider compatibility with various browsers, as modern browsers are not yet able to directly run TS JSX and the latest ES code.

So, we need to convert TS JSX ES and other code in the development environment into JS code that can be executed by the browser, usually ES5.

Babel was one of the first to do this job, developed using JS, with a rich ecosystem and plugins, and has long been integrated into packaging tools such as webpack rollup.

But Babel is developed in JS, so its running efficiency is relatively low. Moreover, Babel requires manual configuration when compiling TS JSX, which is quite cumbersome.

SWC is a JS compiler developed in Rust language, which is 20-70 times faster than Babel (on different CPUs), and natively supports TS and JSX syntax, aiming to replace Babel. Vite uses SWC internally.

Rspack is developed using the Rust language, but it is not just a JS compiler. It is a comprehensive packaging tool with high efficiency.

Like Rspack, ESBullid is developed using the Go language and is a comprehensive packaging tool that includes a JS compiler, making it highly efficient.

Linter & Formatter

The commonly used ones in this section are ESLint and Prettier, but there are also some confusion in their usage

• There are many configuration standards for ESLint (such as Recommended, Airbnb, Google, StandardJS, etc.), and everyone may use them differently. Different projects may also have different configurations
• ESLint and Prettier have some duplicated functions, making it difficult to choose when using them, and there may be duplicate configurations

Minifier

UglifyJS was one of the first used to compress JS code, and now its download volume is also very large.

Terser is developed based on the UglifyJS source code, supporting ES6 new syntax and optimizing tree shaking.

However, new tools such as SWC and esbulid now also support JS code compression, and their execution efficiency is higher. After all, Rust or Go inherently have much higher execution efficiency than JS.

Boundler

Packagers are the ones we most frequently come into contact with, such as Webpack Vite and Parcel. The latter may not be commonly used, but it is also a well-established tool.

Vite uses SWC as an interpreter, which is highly efficient. Use esbulid for packaging in the development environment, and rollup for packaging in the production environment.

Meanwhile, esbulid (developed in Go language, as introduced earlier) and rollup can also be used separately as packaging tools, and many third-party JS plugins are packaged using rollup.

Turbopack is a JS packaging tool developed by Vercel using Rust for Next.js projects, and can also be used independently.

Rspack is a JS packaging tool developed using Rust (along with a JS compiler), which can replace webpack and is very fast.

SWC is also developing its own packaging tool swcpack - with so many, do you think it's messy? Is it fragmented?

Why use Rust

You may be curious, why do so many tools need to be developed in Rust language? There are two main points

• Rust is a compiled language that can be compiled into native code and run directly, with performance comparable to C
• Rust memory management is safer, while C memory management is more prone to bugs

The End

Looking back at three issues with JS toolchains

• Fragmentation: This is too obvious, there are a lot of repetitive tools in various fields, especially boulders
• Incompatibility: Old tools have compatibility with new syntax, especially TS JSX, and require excessive configuration
• Low efficiency: This is also very obvious. In the tool field, JS cannot do as well as Rust, and it is only a matter of time before it is eliminated (don't panic: this is only the tool field, and the application field is still JS and TS)

So, Vue author Evan You has a sharp eye, looks very accurately, and can directly point to problems. Moreover, he has a strong advantage and grip in this part, which is Vite. Vite now has a large number of users and can serve as a good entry point.

When web frameworks such as Vue and single tools such as Vite encounter bottlenecks in their development, Evan can break out of this circle, discover higher-level problems, and be able to execute them on the ground. This is something we should learn from.

Finally, with so much investment, VoidZero needs a return on investment. How will it be commercialized in the future? It's impossible to charge Vite directly, so how can we make money?

Follow me, I will analyze in detail in the next section. This will be more valuable than technology and code.

By the way, I am looking for an international job opportunity, if you have a chance, welcome to connect me on my Github profile.

The above is the detailed content of What is Evan You doing by creating VoidZero, and what are the issues with JS toolchains?. For more information, please follow other related articles on the PHP Chinese website!