Reduce Next.js Bundle Size By Replacing React With Preact

Next.js is a meta-framework built on top of React that solves the problem of hybrid static and server rendering for React.

That being said the react package itself is a tiny library, but combined with react-dom it’s 42 kB of runtime we ship to the client.

Next.js bundle size using React

The final Next.js bundle size is 79.46 kB.

Preact is a React alternative with the same API, but it’s only 3kb in size. This is possible because it doesn’t have extra overhead from using synthetic events like React, but uses the browser’s native API.

If you want to be more informed about the differences, Preact has an entire page dedicated explaining the differences to React (you could say it’s svelte 🥁).

This might sound like a lot of work, but it only requires two steps changing the Webpack config inside Next.js. Credits go to Lee Robinson.

The first step is to install Preact.

terminal
npm i preact

The second step is replacing React with Preact in production by changing the next.config.js.

next.config.js
module.exports = {
  webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat',
      })
    }
    return config
  },
}

That’s it! 🥳 Next time you run npm run build, and npm start there’s a 48% reduction in bundle size at 45.28 Kb.

Next.js bundle size using Preact

Conclusion

This is a great method to save your users from having to download the entire React runtime, but make sure you’re informed about the differences between React and Preact if you need some specific React features.

Thanks for reading! 🏄‍♀️

Found a mistake?

Every post is a Markdown file so contributing is simple as following the link below and pressing the pencil icon inside GitHub to edit it.

Edit on GitHub
Subscribe For Updates