<aside> 🧑‍🎓 Reduction of size of critical dependencies affects the main bundle size and contents, to learn how to inspect it, refer to following guide:

How to inspect bundle contents?

</aside>

The smaller critical application dependencies are, the quicker the data preload request could be sent; the sooner the React can be downloaded, the sooner the app will mount (to display the application). To reduce the size of third-party dependency size, the following actions are required:

1. Create a new build configuration plugin

Create a next extension, declare a build configuration plugin inside. It is possible to use an exiting extension too. Follow these instructions:

How to build configuration plugins?

2. Replace React with Preact

One of largest third-party dependencies is React. It is possible to replace React with Preact, a similar framework, with much smaller foot-print. It will save around 40kb (GZIP). To do, it, first, install Preact:

yarn add [email protected] -E # using Yarn
npm i [email protected] --save-exact # using NPM

Next, modify the Webpack configuration, inside of a build configuration plugin:

// For development mode add preact debug library.
if (process.env.NODE_ENV === 'development') {
    const { entry } = webpackConfig;
    webpackConfig.entry = ['preact/debug'].concat(entry);
}

if (!webpackConfig.resolve) {
  webpackConfig.resolve = {};
}

if (!webpackConfig.resolve.alias) {
  webpackConfig.resolve.alias = {};
}

webpackConfig.resolve.alias.react = 'preact/compat';
webpackConfig.resolve.alias['react-dom'] = 'preact/compat';

webpackConfig.plugins.forEach((plugin) => {
  if (plugin.definitions?.PureComponent) {
    plugin.definitions.PureComponent[0] = 'preact/compat';
		// It is possible to delete such import to remove Preact from main chunk
		// delete plugin.definitions.PureComponent;
  }
});

How to resolve compatibility issues?

• Getting the Cannot find module: 'preact-render-to-string'. error?

• Getting the Can't reexport the named export 'renderToString' error?

• Getting the Cannot read properties of undefined (reading 'is') error?

• Getting the Cannot read properties of null (reading 'insertBefore') error?

• Getting the Cannot read properties of undefined (reading 'renderToString') error when using google-maps-react?

3. Remove node-compatibility packages

By default, some NodeJS APIs are provided, to allow better package compatibility (for example use fs or path utilities. These can be omitted if not used, saving 10kb (GZIP). To do it, modify the Webpack configuration, inside of a build configuration plugin:

webpackConfig.node = false;