This project setup supports code splitting viadynamicimport(). Itsproposal is in stage 4. Theimport() function-like form takes the module name as an argument and returns aPromise which always resolves to the namespace object of the module.

Here is an example:

moduleA.js​

const moduleA='Hello';

export{ moduleA};

App.js​

importReact,{Component}from'react';

classAppextendsComponent{
handleClick=()=>{
import('./moduleA')
.then(({ moduleA})=>{
// Use moduleA
})
.catch(err=>{
// Handle failure
});
};

render(){
return(
<div>
<button onClick={this.handleClick}>Load</button>
</div>
);
}
}

exportdefaultApp;

This will makemoduleA.js and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button. For more information on the chunks that are created, see theproduction build section.

You can also use it withasync /await syntax if you prefer it.

With React Router​

If you are using React Router check outthis tutorial

Also check out theCode Splitting section in React documentation.