million

aidenybai/million
- MIT
- <4kb
- The Virtual DOM Replacement for React
million.dev/blog/virtual-dom
- Diff the data, not the DOM.
- 适用场景
  - 大量静态内容但，少部分动态内容
  - "Stable" UI trees - 不做结构性变化
  - 细粒度场景优化

功能和 react compiler 有一定重复
- twitter.com/aidenybai/status/1794192039808315427
- million.dev/blog/lint-rc
  - million lint PGO - Profile Guided Optimization
  - 支持外部状态库优化

bash

npx million@latest # 自动 init

vite

TypeScript

import million from 'million/compiler';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [million.vite({ auto: true }), react()],
});

nextjs

TypeScript

import million from 'million/compiler';

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

const millionConfig = {
  auto: true, // if you're using RSC: auto: { rsc: true },
};

export default million.next(nextConfig, millionConfig);

Rules

million.dev/docs/manual-mode/block
Block needs to be defined as a variable declaration.
Deterministic returns

TypeScript

// Block 能被定义为变量

console.log(block(() => <div />)) // ❌ Wrong
export default block(() => <div />) // ❌ Wrong

// 👇👇👇

const Block = block(() => <div />) // ✅ Correct

Rules

关联信息

反向链接

站内链接

参考资料