Automatic Mode

Million.js uses Automatic Mode out of the box if you installed via CLI. This optimizes your React components, improving speed without any major code changes. This is the recommended way to use Million.js.

Advanced customization

Automatic mode provides customization options:

threshold: What is used to determine whether a component should be converted to Million.js. When the threshold increases, fewer components will be optimized, and vice versa.
skip: An array of identifiers to indicate if a component should be skipped. You can add hook or variable names, function names, etc.

The auto object lets you configure options beyond the default ones set during installation:

auto: {
  threshold: 0.05, // default: 0.1,
  skip: ['useBadHook', /badVariable/g], // default []
}

next.config.mjs

import million from 'million/compiler';
 
/** @type {import('next').NextConfig} */
const nextConfig = {
   reactStrictMode: true,
};
 
const millionConfig = {
  auto: {
    threshold: 0.05, // default: 0.1,
    skip: ['useBadHook', /badVariable/g], // default []
    // if you're using RSC: auto: { rsc: true },
  }
}
 
export default million.next(nextConfig, millionConfig);

Ignoring components

If you encounter an error with a component during the Million.js runtime, it can be skipped using the // million-ignore comment.

// million-ignore
function App() {
  return ...
}

Muting help messages

To avoid seeing help messages, you can pass the mute: true option to the compiler inside the auto object.

Installation block()