**Философия изменений: От Less к CSS-in-JS**
Самое радикальное изменение — полный отказ от Less в пользу CSS-in-JS решения на базе `@ant-design/cssinjs`. Это не каприз, а ответ на вызовы современной веб-разработки:
* **Динамическая темизация:** В v4 темы были предкомпилированы. В v5 стили генерируются в рантайме, что позволяет менять тему (включая алгоритм производных цветов) на лету, без перезагрузки страницы. Это открывает двери для сложных персонализаций.
* **Лучшая tree-shaking поддержка:** Теперь из бандла исключаются неиспользуемые стили на уровне компонентов, а не целых файлов Less.
* **Изоляция стилей:** Решается проблема конфликтов CSS. Стили компонентов инкапсулированы.
**Архитектурные последствия для архитектора:**
- **Производительность в рантайме:** Генерация стилей «на лету» добавляет небольшие накладные расходы при первой загрузке и смене темы. Для большинства приложений это незаметно, но для высоконагруженных интерфейсов требует бенчмаркинга.
- **Bundle Size:** Хотя tree-shaking улучшился, итоговый размер бандла в v5 может быть сопоставим или чуть больше, чем у оптимизированной сборки v4 с purgecss. Однако выигрыш в гибкости и простоте настройки значителен.
- **Экосистема:** Все официальные плагины и библиотеки, зависящие от Less (например, кастомные вебпак-конфигурации для темизации), требуют пересмотра.
- **Новая архитектура тем: Design Token.**
```javascript
// v4 (Less)
// webpack.config.js: modifyVars: { '@primary-color': '#1DA57A' }
// v5 (CSS-in-JS)
```
- **Удаление иконков из основного пакета.**
- **Изменения в компонентах.**
* **Grid:** `flex` режим теперь используется по умолчанию для `Row`. Убедитесь, что ваши верстки не сломались.
* **Typography:** `ellipsis` теперь является свойством, а не отдельным компонентом `Text`.
* **Table:** `columns` теперь поддерживают `dataIndex` с вложенным путем через массив (например, `['user', 'name']`). Удалено свойство `onRowClick` — используйте `onCell`.
**Пошаговый план миграции для команды:**
**Этап 0: Подготовка (Архитектор)**
- **Анализ зависимостей:** Проведите аудит проекта. Какие библиотеки зависят от `antd@4`? Есть ли кастомные скрипты, плагины (например, `antd-theme-webpack-plugin`, `craco-antd`)? Составьте матрицу совместимости.
- **Оценка объема:** Используйте Codemod-скрипты от сообщества или статический анализ, чтобы оценить количество изменений, особенно в `Form`, `Icon` и `DatePicker`.
- **Создание sandbox:** Разверните изолированную среду (например, в Git-репозитории) с копией вашего приложения для тестирования миграции.
- Установите `antd@5` и `@ant-design/icons@5`.
- Удалите все плагины и конфигурации, связанные с Less (`less`, `less-loader`, `craco-antd` и т.д.).
- Обновите, если возможно, связанные библиотеки (например, `antd-table-export`).
Команда Ant Design предоставляет скрипты для автоматического преобразования части кода. Например, для миграции иконок. Используйте их с осторожностью и обязательно делайте коммит перед запуском.
```bash
npx -p @ant-design/codemod-v5 antd5-codemod src/
```
**Этап 3: Ручной рефакторинг (Основная работа команды)**
- **Иконки:** Массовая замена через поиск по коду.
- **Формы:** Это самая трудоемкая часть. Перепишите каждую форму, используя новый API с `useForm` и `Form.Item`. Потребуется рефакторинг логики валидации и получения данных.
- **Тема:** Переопределите ваши кастомные стили через Design Token в `ConfigProvider`. Убедитесь, что динамическая смена темы (если она есть) работает корректно.
- **Компоненты:** Пройдитесь по списку breaking changes и исправьте использование `DatePicker`, `Typography`, `Grid` и т.д.
- **Визуальный регресс:** Используйте инструменты типа Chromatic, Percy или даже ручную проверку для сравнения скриншотов до и после.
- **Функциональное тестирование:** Особое внимание — формы, таблицы с сортировкой/фильтрацией, календари.
- **Производительность:** Замерьте First Contentful Paint (FCP), Largest Contentful Paint (LCP) и размер бандла. Используйте Source Map Explorer для анализа нового состава бандла.
- **Обратная совместимость (если нужно):** Для очень крупных проектов рассмотрите возможность использования `@ant-design/compatible` — пакета, который временно предоставляет старые API v4 (в основном Form и Icon) внутри v5. Но рассматривайте это как временный костыль.
Миграция на Ant Design v5 — это инвестиция. Вы получаете не просто обновленную библиотеку, а современную, гибкую дизайн-систему, готовую к будущему: динамическим темам, лучшей производительности за счет tree-shaking и более предсказуемому поведению стилей. Для архитектора успех этой операции лежит в тщательном планировании, поэтапном выполнении и фокусе на самом болезненном — рефакторинге форм. Результатом станет более поддерживаемый и технологически современный фронтенд.
Комментарии (8)