React.lazy

Allows you to render a dynamically loaded component as a normal component.

React.lazy takes a function that must call a dynamic import()

React.lazy(() => import('...'))

This must return a Promise which resolves to a module with a default export containing a React component.

React.lazy(() => import('./SomeComponent'))

...

export default function SomeComponent() { ... }

module.exports = {
	entry: {
	main: './src/app.js',
	},
	output: {
	// `filename` provides a template for naming your bundles (remember to use `[name]`)
	filename: '[name].bundle.js',
	// `chunkFilename` provides a template for naming code-split bundles (optional)
	chunkFilename: '[name].bundle.js',
	// `path` is the folder where Webpack will place your bundles
	path: './dist',
	// `publicPath` is where Webpack will load your bundles from (optional)
	publicPath: 'dist/'
	}
	};

Suspense

Suspense is a component that handles rendering lazy loaded components with a fallback while loading.

<Suspense fallback={<div>Loading...</div>}>

</Suspense>