Как можно динамически импортировать компонент с помощью lazy load?

Для динамической загрузки компонента MainScreen с использованием React и код-сплиттинга, можно воспользоваться функцией import() для динамического импорта компонента. Вот пример, как это можно сделать:

1. Создайте файл screens/index.js, в котором будет происходить динамический импорт компонента MainScreen:

```javascript
const MainScreen = React.lazy(() => import('./MainScreen'));
export { MainScreen };
```

2. Используйте React.lazy для ленивой загрузки компонента MainScreen в вашем главном файле приложения:

```javascript
import React, { Suspense } from 'react';
const MainScreen = React.lazy(() => import('./screens'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MainScreen />
      </Suspense>
    </div>
  );
}

export default App;
```

3. Обратите внимание, что React.lazy требует обертки компонента внутри компонента Suspense, чтобы показать индикатор загрузки во время загрузки компонента.

Теперь компонент MainScreen будет динамически загружаться при первом обращении к нему, что позволит улучшить производительность вашего приложения.