Dynamic импорт, или lazy импорт нужен для того чтоб компоненты подгружались не сразу а по надобности, таким образом снизив размер базовой страницы. Меньше размер - быстрее загрузка. Быстрее загрузка - хорошее SEO и довольные пользователи.
Особенно удобно использовать ленивую загрузку при написании блогов.
В блогах есть множество UI компонентов, сколько есть варантов размещения картинки с текстом? Например когда картинка слева, а справа текст или наоборот, или текст поверх картинки, или текст появляется при клике на картинку и т.д. Примеров очень много. Да и самих страниц (блог-постов) может быть сотни. Хардкодить данные никто не будет, скорее всего текст и картинки буду храниться в CMS. CMS - это система управления контентом. В ней можно добавлять тексты, картинки и присваивать каждому типу контента лейблы (теги, названия). Т.е. прям в CMS можно просто написать документы которые будут выступать в качестве контента для блога. Потом интегрировать CMS с кодом, и сайт начнет получать данные.
Но данные это просто JSON обьекты с текстом и ссылками на картинки (или другие медиа).
И в этот момент стоит задуматься о динамическом импорте.

[↓ Смотреть Видео ↓](#watch-now)

## Пример данных из CMS

Приблизительно так выглядит структура данных которые получает сайт из CMS

    {
      sys: {
        type: 'imageWithDescription',
      },
      fields: {
        cover: [Object],
        title: 'Узнайте как написать адаптивное веб приложение на HTML CSS и JS',
        description: 'Научитесь использовать новейшие фичи HTML CSS и JS чтобы написать адаптивное приложение всего за час.'
      }
    }

У каждого обьекта есть `sys` и `fields` поля. Где `sys.type` тип обьекта, а все что в `fields` это разные виды контента принадлежащие этому типу.

## Добавляем импорт с условием

Теперь молжно создать функцию которая будет переводить наш контент в React компонент в зависимости от типа (обратите внимание что в примере я использую Next JS):

    import dynamic from 'next/dynamic'

    const renderComponent = ({sys, fields}) => {
      const elementID = sys.type;

      switch(elementId){
        case 'imageWithButton':{
          const ImageWithButton = dynamic(() => import('components/ImageWithButton'))
          return <ImageWithButton key={sys.id} {...fields}/>
        }
        case 'imageWithDescription':{
          const ImageWithDescription = dynamic(() => import('components/ImageWithDescription'))
          return <ImageWithDescription key={sys.id} {...fields}/>
        }
        default:{
          return <span>Component with type {elementId} not found</span>
        }
      }
    }

Данная функция принимает в себя обьект из CMS, далее она проверит тип обьекта и только после этого (если тип найден в условии) выполниться импорт комонента, после чего функция вернет уже выгруженный React компонент.

## Используем функцию для динамического импорта компонентов

Очень важно настроить вашу CMS и сделать так чтобы компонент страницы мог хранить в себе много различных видов контента в виде массива. В разных CMS это может настраиватся по разному. Таким образом наш код на каждой странице будет получать этот массив объектов и все что нам нужно сделать это отобразить каждый из них.
И как вы знаете, в этом может помочь функция `map`:

    // [blog].js
    export default const Page = data => data.map(content => renderComponent(content));

Если вы как и я используете NextJS то это весь код который будет написан непосредственно для страницы блога. 
Мы просто проходимся по массиву данных полученых из CMS и дальше рендерим их используя функцию которую мы создали ранее!

## Watch now


Когда использовать динамический импорт

SEO оптимизация с помощью dynamic import для React и Next js приложений

An analyst working at laptop with automation process. business process automation, business process workflow

Analyst working at laptop with automation process

В этом уроке по JS вы узнаете как с помощью кода можно отображать разные React элементы в зависимости от контента.

Читай и смотри пример как ускорить загрузку твоего сайта используя динамический импорт в React/Next JS. Как это решение поможет сделать сайт с минимальным количеством кода.

OB Web Dev

OB Web Dev

Динамический импорт UI компонентов в React JS

Динамический импорт UI компонентов в React JS

Получить скидку на курс основы WebDev