Build Tools Comparison

Benchmark comparing JavaScript bundlers and build tools (Rspack, Rsbuild, webpack, Vite and Farm) for dev server startup time, build performance and bundle size for applications with different module sizes.

Bench cases

small (2.5k modules)

1000 React components + 1500 modules in node_modules. (Most components are dynamic imported)

pnpm benchmark small

medium (10k modules)

5000 React components + 5000 modules in node_modules. (Most components are dynamic imported)

pnpm benchmark medium

large (20k modules)

10000 React components + 10000 modules in node_modules. (Most components are dynamic imported)

pnpm benchmark large

Run locally

Run the benchmark.mjs script to get the results (requires Node.js >= 22):

# Run the benchmark for the medium case
pnpm benchmark

# Run the benchmark for the small case
CASE=small pnpm benchmark

If you want to start the project with the specified tool, try:

pnpm i # install dependencies

# Dev server
pnpm start:farm # Start Farm
pnpm start:rspack # Start Rspack
pnpm start:rsbuild # Start Rsbuild
pnpm start:vite # Start Vite
pnpm start:webpack # Start webpack

# Build
pnpm build:farm # Build Farm
pnpm build:rspack # Build Rspack
pnpm build:rsbuild # Build Rsbuild
pnpm build:vite # Build Vite
pnpm build:webpack # Build webpack

Options

Use CASE to switch the benchmark case:

CASE=small pnpm benchmark
CASE=medium pnpm benchmark

Use TOOLS to specify the build tools or bundlers:

# Run with all tools
TOOLS=all pnpm benchmark

# Run Rspack and Rsbuild
TOOLS=rspack,rsbuild pnpm benchmark

Use RUN_TIMES to specify the number of runs (defaults to 3):

RUN_TIMES=3 pnpm benchmark

Use WARMUP_TIMES to specify the number of warmup runs (defaults to 1):

WARMUP_TIMES=2 pnpm benchmark

Use FARM=true to run Farm:

FARM=true pnpm benchmark

Credits

Forked from farm-fe/performance-compare, thanks to the Farm team!