DEV Community

PRATYAY MUSTAFI
PRATYAY MUSTAFI

Posted on Originally published at pratyay.bond on

Speed Up Compilation of React.js and Next.js Apps

Introduction:

Million js is a library that can be used to speed up the compilation of React and Next js apps. It does this by using a custom compiler that is optimized for performance. Million js also uses a custom virtual DOM that is more efficient than the default React virtual DOM Million js enhances React / Next js performance up to 70%.

How to use Million js:

To use Million js, you need to install it and then add the block() function to your React code. The block() function takes a React component as its input and returns a new component that is optimized for performance.

Here is an example of how to use Million.js:

Normal react snippet

export default function App() {
  return (
    <>
      <p>Hello world</p>
    </>
  );
}

Enter fullscreen mode Exit fullscreen mode

Same code snippet with Million.js

import { block } from "million/react";
export default block(function App() {
  return (
    <>
      <p>Hello world</p>
    </>
  );
});

Enter fullscreen mode Exit fullscreen mode

The block() function will optimize the App component for performance. This will make the compilation of the React app faster.

How Million.js works:

Million.js works by using a custom compiler that is optimized for performance. The compiler uses several techniques to speed up the compilation of React code, including:

  • Using a custom virtual DOM that is more efficient than the default React virtual DOM.
  • Optimizing the code for specific browsers and devices.
  • Reducing the amount of code that needs to be compiled.

Installing Million.js:

You can install Million.js using the following command:

npm

npm install million

Enter fullscreen mode Exit fullscreen mode

pnpm

pnpm install million

Enter fullscreen mode Exit fullscreen mode

yarn

yarn add million

Enter fullscreen mode Exit fullscreen mode

Using Million.js with Next.js:

If you are using Next.js, you need to rename your Next.config.js file to Next.config.mjs and then add the following code to the file:

import million from "million/compiler";

const nextConfig = {
  reactStrictMode: true,
};

export default million.next(nextConfig);

Enter fullscreen mode Exit fullscreen mode

This will make Next js use the Million js compiler and you can easily compile react code up to 70% faster.

For more information visit the official Million Js website

Happy coding :)

Top comments (0)