Features
- Drop-in React optimization — no rewrite needed
- Block virtual DOM replaces diffing with direct DOM edits
- Compiler automatically identifies optimizable components
- Compatible with existing React ecosystem
- Automatic and manual optimization modes
Pros
- Dramatic performance gains with minimal effort
- Zero API changes — works with existing React code
- Easy adoption via Vite/Next.js/webpack plugin
Cons
- Not all React patterns are optimizable (dynamic children, refs)
- Adds a build step and compiler complexity
- Performance gains vary depending on component structure
Overview
Million.js is an optimizing compiler that makes React components up to 70% faster by replacing React’s virtual DOM diffing with a block-based approach. Instead of diffing entire component trees, Million identifies static structure and only tracks dynamic expressions, generating direct DOM mutations that skip the reconciliation step entirely.
The key insight is that most React components have a fixed structure with a few dynamic values. Million’s compiler detects this pattern and generates optimized “blocks” that update only the specific DOM nodes tied to changing data. It works as a drop-in plugin for Vite, Next.js, or webpack — you keep writing normal React code and the compiler handles optimization.
When to Use
Million.js is the right choice when you have a React application with performance bottlenecks, when you want faster rendering without rewriting components, or when migrating away from React is not feasible but you need better performance. It shines with components that render lists or have mostly static templates.
Getting Started
npm install million// vite.config.ts
import million from "million/compiler";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [million.vite({ auto: true }), react()],
});