Build-конфигурация

Для начала работы с Chakra UI необходимо установить пакет через npm или yarn:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

или

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

После установки библиотеку нужно интегрировать в проект. В React-приложении основной точкой подключения является корневой компонент:

import { ChakraProvider } from "@chakra-ui/react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  document.getElementById("root")
);

ChakraProvider обеспечивает доступ к темам, глобальным стилям и компонентам Chakra по всему приложению.

Настройка темы

Chakra UI поддерживает кастомные темы, что позволяет изменять цвета, шрифты, отступы и другие свойства по умолчанию.

Создание собственной темы выполняется через функцию extendTheme:

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7caca",
      500: "#e53e3e",
      900: "#742a2a",
    },
  },
  fonts: {
    heading: "Georgia, serif",
    body: "Arial, sans-serif",
  },
});

export default theme;

Подключение кастомной темы происходит через ChakraProvider:

import { ChakraProvider } from "@chakra-ui/react";
import theme from "./theme";

<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>

Ключевой момент: все компоненты автоматически получают доступ к расширенной теме, что позволяет использовать новые цвета, шрифты и размеры в стилях и пропсах.

Build-конфигурация проекта

Для оптимальной работы Chakra UI в production необходимо настроить сборку приложения так, чтобы минимизировать размер CSS и исключить ненужные стили. Основные инструменты — Vite, Webpack и Next.js.

Webpack

  1. Настройка tree-shaking для Chakra UI

Chakra UI поддерживает tree-shaking, что уменьшает размер итогового бандла. Для этого важно использовать ES-модули (import { Button } from "@chakra-ui/react"), а не глобальный импорт всех компонентов (import * as Chakra from "@chakra-ui/react").

  1. Минификация CSS и JavaScript

Webpack с mode: "production" автоматически включает TerserPlugin для JS и MiniCssExtractPlugin для CSS.

Пример конфигурации:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "production",
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};
  1. PurgeCSS для удаления неиспользуемых стилей

Chakra UI использует динамическое генерацию CSS через emotion, поэтому обычный PurgeCSS не всегда эффективен. Лучше использовать встроенные механизмы Chakra и @chakra-ui/styled-system с правильными пропсами.

Vite

Vite обеспечивает мгновенную сборку и эффективный HMR. Для Chakra UI рекомендуется использовать ES-модули и отключить SSR для development, если это не Next.js.

Пример vite.config.js:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    minify: 'esbuild',
    rollupOptions: {
      output: {
        manualChunks: {
          chakra: ['@chakra-ui/react', '@emotion/react', '@emotion/styled', 'framer-motion']
        },
      },
    },
  },
});

Разделение на отдельный чанк chakra позволяет кешировать библиотеку отдельно и уменьшает размер основного бандла.

Next.js

Chakra UI хорошо интегрируется с Next.js, однако при server-side rendering (SSR) важно корректно инициализировать стили:

  1. Создаём pages/_app.js:
import { ChakraProvider } from "@chakra-ui/react";
import theme from "../theme";

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;
  1. Для SSR используем @chakra-ui/react и @emotion/react для корректного рендера стилей на сервере:
import { ColorModeScript } from "@chakra-ui/react";
import theme from "../theme";

export default function Document() {
  return (
    <html lang="en">
      <head />
      <body>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
      </body>
    </html>
  );

ColorModeScript гарантирует правильный режим цветовой темы при загрузке страницы.

Оптимизация и best practices

  • Tree-shaking компонентов: импортировать только необходимые компоненты.
  • Использование кастомной темы: сокращает дублирование CSS и упрощает поддержку стилей.
  • Минимизация и разделение чанков: уменьшает время загрузки приложения.
  • Server-side rendering (SSR): для Next.js важно включить ColorModeScript и корректно настроить emotion cache.
  • Dynamic imports: загружать редко используемые компоненты асинхронно для снижения размера основного бандла.

Работа с CSS-in-JS

Chakra UI использует emotion для генерации CSS на лету. Основные принципы:

  • Пропсы компонентов (bg, color, p, m, borderRadius) автоматически конвертируются в CSS.
  • Можно использовать sx для передачи произвольного CSS:
<Box sx={{ display: "flex", alignItems: "center" }}>
  Контент
</Box>
  • Для глобальных стилей применяется GlobalStyle или CSSReset из Chakra UI.

Выводы по конфигурации сборки

Правильная build-конфигурация включает:

  1. Подключение ChakraProvider с кастомной темой.
  2. ES-модули и tree-shaking для уменьшения бандла.
  3. Минификацию и разделение чанков через Webpack или Vite.
  4. Корректную настройку SSR для Next.js с ColorModeScript.
  5. Использование CSS-in-JS через пропсы и sx для упрощения стилей и динамической генерации CSS.

Эти шаги обеспечивают быструю загрузку приложения, оптимальный размер бандла и легкость поддержки стилей.

Оглавление