splitComponent()

import { splitComponent } from '@dr.pogodin/react-utils';

splitComponent({ chunkName, getComponent, placeholder }): React.ElementType;

The splitComponent() function wraps a specified React component for Code Splitting. In other words, if a <Component> is only imported into your app via splitComponent() function, then all <Component> code, and any its sub-components, and dependency code which is not used directly in the rest of the app, will be split into a separate code chunk, which will be loaded to the client side only when required, thus saving the size of the main app bundle, and hence the initial loading time for the application as a whole.

See the example to understand how to use it.

History

v1.16.0 - multiple splitComponent() signature changes:
- getClientSide option was renamed into getComponent.
- serverSide option was removed.
- placeholder option was changed to accept React element instead of element type, i.e. <Component /> instead of Component.

Arguments

options - object - The only argument of splitComponent() is an option object, holding all required parameters.
- chunkName - string - Unique name for the new code chunk, e.g. "sample-code-chunk".
- getComponent - function - A function which resolves to the original component element, and uses dynamic import() with webpackChunkName magic comment matching the name provided via chunkName option, e.g. (that assumes the component is the default export from its module):
```
() => import(/* webpackChunkName: 'sample-code-chunk' */ 'path/to/SampleComponent')
```
  Note
  The matching chunkName argument and webpackChunkName magic comment are used to dynamically inject necessary CSS chunks into the page. The library will throw if the same chunk name is used for different split components. Unfortunately, it does not automatically check whether chunkName and webpackChunkName match, nor allows to avoid using them altogether.
- placeholder - React.ReactNode - Optional. Placeholder element to render in-place of the splitted component while its code chunk is being loaded.

Example

Assume SampleComponent is a root component for a React sub-tree which we want to split into a stand-alone code chunk, and it was originally imported in our code like this:

import SampleComponent from 'path/to/SampleComponent';

To split it into a separate code chunk:

Use splitComponent() function to wrap SampleComponent for the code splitting. For that, in the code which will be using SampleComponent (outside the new chunk), you create a wrapper component (it also can be done directly in the file where you need it, if you need it in a single file only):

// path/to/SplittedSampleComponent.js

import { splitComponent, webpack } from '@dr.pogodin/react-utils';

export default splitComponent({
  chunkName: 'sample-component-chunk',
  getComponent: () => import(
    /* webpackChunkName: 'sample-component-chunk' */ 'path/to/SampleComponent'
  ),
  placeholder: <div>Optional Placeholder</div>,
});

Everywhere SampleComponent is used (outside its new chunk), you replace the original imports by imports of the wrapped component created above:

import SampleComponent from 'path/to/SplittedSampleComponent';

That's it, SampleComponent from path/to/SplittedSampleComponent will work exactly the same as the original component, but it will live in a separate code chunk, assuming you have removed all regular imports / required of that component from outside its chunk.

Arguments​

Example​

Arguments

Example