Использование CDN для быстрого старта

Для быстрого начала работы с библиотекой Ant Design можно использовать CDN. Это позволяет избежать установки через npm и настроек сборщика, сразу подключив необходимые стили и скрипты в HTML-документе.

Подключение CSS и JavaScript

Базовая структура подключения выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Ant Design через CDN</title>
    <!-- Антд стили -->
    <link 
        rel="stylesheet" 
        href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.3.0/reset.min.css"
    />
</head>
<body>
    <div id="root"></div>

    <!-- React и ReactDOM -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

    <!-- Ant Design -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/5.3.0/antd.min.js"></script>

    <script>
        const { Button, DatePicker, Input } = antd;

        const App = () => {
            return React.createElement(
                'div',
                { style: { padding: '20px' } },
                React.createElement(Button, { type: 'primary', onClick: () => alert('Clicked!') }, 'Нажми меня'),
                React.createElement('div', { style: { marginTop: '20px' } },
                    React.createElement(DatePicker, null)
                ),
                React.createElement('div', { style: { marginTop: '20px' } },
                    React.createElement(Input, { placeholder: 'Введите текст' })
                )
            );
        };

        ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
    </script>
</body>
</html>

Ключевые моменты:

  • Стили Ant Design должны быть подключены до рендеринга компонентов.
  • Версии React и Ant Design должны быть совместимыми.
  • Компоненты Ant Design доступны через глобальный объект antd.

Использование отдельных компонентов

CDN позволяет использовать все компоненты без дополнительной сборки, но важно помнить, что в таком случае:

  • Нет Tree Shaking — все компоненты подключаются сразу, что увеличивает размер страницы.
  • Управление локализацией и темами происходит через глобальные настройки библиотеки.

Пример подключения локализации:

<script>
    const { ConfigProvider, DatePicker } = antd;
    const ruRU = antd.locale.ru_RU;

    const App = () => {
        return React.createElement(
            ConfigProvider,
            { locale: ruRU },
            React.createElement(DatePicker)
        );
    };

    ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
</script>

Настройка темы без сборщика

Ant Design поддерживает динамическую смену темы через CSS-переменные. При подключении через CDN можно переопределять переменные до подключения стилей:

<style>
    :root {
        --antd-primary-color: #1DA57A;
        --antd-link-color: #1890ff;
    }
</style>

После этого все компоненты автоматически подхватят новые цвета, без необходимости использования less или webpack.

Подключение дополнительных плагинов

Некоторые компоненты, такие как Charts или Pro Components, требуют дополнительных библиотек. Их можно подключить через отдельные CDN:

<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/antd-pro@2.0.0/dist/antd-pro.min.js"></script>

Важно проверять зависимости: Ant Design использует dayjs вместо moment в последних версиях, поэтому старые примеры с moment могут быть несовместимы.

Преимущества и ограничения CDN подхода

Преимущества:

  • Мгновенный старт без сборки.
  • Минимальная конфигурация.
  • Подходит для прототипов и демонстраций.

Ограничения:

  • Больший вес страницы из-за отсутствия Tree Shaking.
  • Меньший контроль над версионированием при обновлениях CDN.
  • Ограниченные возможности кастомизации сложных тем и плагинов.

CDN-подключение идеально для быстрого прототипирования, тестирования отдельных компонентов и учебных целей. Для продакшн-проектов рекомендуется использовать установку через npm с полноценной сборкой и конфигурацией Webpack или Vite, что позволяет оптимизировать размер и производительность приложения.

Оглавление