Use Dynamic Imports for components

[marinoska]

Use Dynamic Imports for Code Splitting

By using import() statements for lazy loading parts of your application (such as components or pages), you can split large chunks into smaller pieces that are loaded only when needed.
For example:

// Instead of this:
import MyComponent from './MyComponent';

// Use dynamic imports like this:
const MyComponent = React.lazy(() => import('./MyComponent'));

In React, you can wrap lazily loaded components with : Suspense

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <MyComponent />
  </Suspense>
);

export default App;