6x faster than Vite, 10ms HMR, Farm: An extremely fast web build tool written in Rust

Farm (https://github.com/farm-fe/farm ⭐) is an extremely fast vite-compatible build tool written in Rust. For a benchmark React project(using turbopack's benchmark, 1000 react components), the performance comparison is as follows:

Farm is 6x faster than Vite, 20x faster than Webpack when cold start, 10x faster than Vite, 35x faster than Webpack when build.

Test Repository: https://github.com/farm-fe/performance-compare

Test Machine (Linux Mint 21.1 Cinnamon, 11th Gen Intel© Core™ i5-11400 @ 2.60GHz × 6, 15.5 GiB)

1. Farm Features

• Super fast: All compilation is implemented by Rust, with multi-threaded compilation, millisecond project startup, 10ms HMR. It is 20 times faster than Webpack and 6 times faster than Vite.
• Rich Compilation Features: By default, it supports the compilation capabilities of Html, Css, Js, Jsx, Ts, Tsx, static resources (pictures, fonts, etc.) and other modules. All web resources are treated as first-class citizens, all compilation capabilities are available out of the box.
• Lazy compilation: By default, on-demand compilation is adopted. Except for the modules required for the first screen, other modules are compiled when loading! Since the content that can be displayed on the first screen is limited, in theory, Farm can support instant startup for projects of any size!
• Fully Pluggable: All capabilities of Farm are implemented by plug-ins, and any function can be customized and expanded through plug-ins. Farm supports both Rust plug-ins and Js plug-ins. And Vite plugins can be used in Farm directly since v0.13.
• Consistency: Farm’s compilation behavior remains consistent in the development environment and production environment. What you see during development is what you get in production.
• Partial Bundling: Farm will automatically identify the module dependency graph and automatically generate several small Bundles based on dependency relationships, product size and other factors to improve resource loading performance with out losing cache granularity.

Currently (2023.10.16), Farm has been updated to v0.13, which basically supports all the above features including production optimization like minify, tree shake, syntax downgrade and polyfill injection.

2. Quick Start

Project: https://github.com/farm-fe/farm

Official website: https://farm-fe.github.io/

Note: Farm requires Node 16 or above. If you use a linux system, you need ubuntu 22 or above (with GLIBC 2.32 or above)

Farm provides CLI to create, develop, and build projects with one click. First, create a Farm React project using create-farm:

pnpm create farm

Startup project

cd farm-project && npm start

A successful startup as shown below:

3. Why Farm？

As the scale of front-end projects continues to grow, traditional js building tools (bundler) such as webpack and rollup have encountered serious performance bottlenecks. The project startup time is as long as several minutes, and one HMR takes several seconds or tens of seconds, which has greatly affected The efficiency of front-end development.

In order to solve the performance problem, Vite and other tools known as the next generation build engine (bundle less) came into being. Instead of fully bundling the project, Vite uses esbuild to pre-bundling node_modules, and the module loading of the project is completed based on the native es module with a dev server. This greatly reduces the project startup time (a few seconds for cold startup and hundreds of milliseconds for hot startup) and HMR time.

However, in my opinion, Vite is not perfect. According to the my previous experience working at the front-end architecture team of ByteDance, when the project is really huge (such as 1000+ modules on the first screen), Vite’s first page loading time may be as long as tens of seconds(Because Vite adopts a request-time compilation strategy for the modules in the project, and does not bundle the source code), it is extremely stuck when refreshing, and may cause browser crash due to the huge number of requests, which greatly affects the development experience . Moreover, Vite uses esbuild for pre-bundling in the development environment, but uses traditional bundler rollup in the production environment. There are major inconsistencies. Occasionally, there may be inconsistencies between the development environment and online behavior. Once inconsistencies occur, troubleshoot It was very difficult and torturous.

Therefore, in my opinion, Vite(or bundle-less strategy) is not a perfect solution, and the reason why Vite is fast is indispensable to esbuild. According to data from the esbuild official website, esbuild is a hundred times faster than webpack, rollup and other tools, and esbuild is written in Go, which is much faster than js, I believes that the current fundamental problem is actually the efficiency of js.

So I designed and implemented Farm: an extremely fast build tool written in Rust. It avoids all disadvantages of Vite and extremely fast. All compilation capabilities (html, css, ts/js/tsx/jsx, sass, etc.) are implemented by Rust(based on SWC). Farm can start projects in milliseconds. In most cases, can apply HMR within 10ms.

4. Farm Architecture Design

4.1 Design Philosophy

• Performance first: All compilation capabilities are implemented by Rust, with multi-threaded compilation, lazy compilation, you can start a project in any scale instantly.
• Pluggable: All compilation capabilities are implemented by plug-ins, and a Rollup-style plug-in system is provided to ensure the simplicity and ease of use of the plug-in system. Supports both Rust plug-ins and Js plug-ins. And embrace Vite plugin ecosystem to reuse existing js plugins.
• First-class citizens: All web resources are compiled as first-class citizens and generate corresponding products.
• Consistency, Compatibility: Ensure that the development environment and online environment are consistent and compatible with old browsers (such as IE9)
• Partial bundle: Automatically bundle the project into a few small bundles based on factors such as dependencies, resource size, etc., speedup the resources loading without losing cache granularity.

4.2 Architecture Design

The overall architecture diagram of Farm is as follows:

Farm is mainly divided into two parts, the Js side and the Rust side

• Js side: Implement Farm CLI, Dev Server and runtime capabilities, and interact with the Rust build core through napi.
• Rust side: Responsible for the core compilation process implementation, compilation context, etc. All compilation processes are executed in the thread pool with maximum concurrency.

The entire compilation process is divided into Build Stage and Generate Stage (borrowed from the concept in Rollup, but completely different from the implementation of Rollup). The Build Stage is responsible for parsing and compiling all modules and generating module graphs. The Generate Stage performs resources rendering, bundles generating, runtime injection, compression/treeshake (under implementation), product generation, etc. based on the module dependency graph.

If you want to know more details, you can see: https://github.com/farm-fe/rfcs/blob/main/rfcs/001-core-architecture/rfc.md

4.3 Plug-in system

Farm's plug-in system refers to Rollup, The hook calling process is as follows:

5. Future Plan

Currently, Farm has been updated to v0.13, which has implemented the necessary capabilities of a build tool and has reached the state that can be used in the production environment:

• Compilation and product generation of Html, Css, Jsx, Js, Tsx, Ts and other resources
• Lazy Compilation and HMR
• Partial Bundling
• Loading and execution of Rust plug-ins and Js plug-ins
• CLI provided
• Production environment optimization: compression, treeshake, etc.
• Source Map generation
• Css modules support
• Official plugin support for css preprocessors such as Sass, Less, Postcss
• Vite plugin compatibility
• ...

In the near future, Farm will officially release version 1.0