Библиотека cn: замена tailwind-merge и clsx с ускорением в 30 раз

Если вы когда-либо инспектировали производительность сложного фронтенд-дашборда с сотнями интерактивных компонентов, вас наверняка удивляло, куда процессор тратит миллисекунды при обычной прокрутке или обновлении таблицы. Вроде бы в коде нет тяжелой математики: обычные кнопки, бейджи, ячейки данных. Однако профилировщик Chrome раз за разом упорно указывает на неприметную вспомогательную функцию cn(...), которая вызывается на каждый рендер каждого DOM-элемента.

В современной компонентной разработке с использованием Tailwind CSS связка библиотек clsx и tailwind-merge стала негласным отраслевым стандартом. Именно она лежит в основе популярнейшей дизайн-системы shadcn/ui. Первая библиотека склеивает классы по условиям, вторая — разрешает конфликты специфичности, гарантируя, что переданный снаружи p-6 перекроет дефолтный p-2. Но за это удобство разработчикам приходилось платить постоянными накладными расходами рантайма. Создатель Million.js Эйден Бай и автор shadcn/ui Шед Али объединили усилия, чтобы решить эту проблему раз и навсегда. Их новая библиотека cn заменяет обе утилиты, демонстрируя феноменальный 30-кратный прирост скорости.

Цена привычной связки clsx и tailwind-merge

Чтобы осознать масштаб проблемы, достаточно посмотреть на путь, который проходила обычная строка стилей до появления новой библиотеки. При каждом вызове cn("px-4 py-2", isPrimary && "bg-blue-600", className) происходило два независимых прохода:

1. Библиотека clsx обходила массив аргументов, отсеивала булевы флаги, разбирала объекты и генерировала промежуточную объединенную строку.
2. Эта строка тут же передавалась в tailwind-merge, которая заново разбивала ее на отдельные токены, пропускала через серию регулярных выражений и сопоставляла с громоздкими внутренними таблицами классов Tailwind, чтобы выяснить, конфликтуют ли между собой условные правила отступов или цветов.

В масштабах одного вызова эта процедура занимала около 320 наносекунд. Кажется, сущие пустяки. Но когда на странице рендерится каталог из тысячи товаров, в каждом из которых по десятку стилизованных элементов, суммарные накладные расходы начинают измеряться десятками миллисекунд. Интерфейс теряет отзывчивость, а показатель Interaction to Next Paint (INP) ползет в желтую зону.

Архитектура наносекунд: за счет чего достигается ускорение

Библиотека cn от авторов shadcn полностью отказывается от промежуточных строковых трансформаций. Вместо двух последовательных шагов она объединяет логику фильтрации условий и сопоставления классов в едином компактном цикле с нулевыми внешними зависимостями (zero-dependency).

Обычный вызов cn(...) в новой библиотеке выполняется всего за 10 наносекунд — ровно в 32 раза быстрее классической связки. Более того, авторы внедрили проверку ссылочной идентичности (identity check): если компонент перерисовывается с теми же входными параметрами, утилита возвращает закэшированный результат всего за 7 наносекунд. Независимый бенчмарк на репрезентативной выборке из 144 тысяч реальных вызовов, собранных из 58 открытых репозиториев, показал среднее ускорение в 37 раз.

При этом размер минифицированного бандла библиотеки составляет скромные 26 КБ, что существенно легче суммарного веса двух заменяемых пакетов.

Бесшовная миграция кодовой базы

Главное достоинство cn — стопроцентная обратная совместимость (drop-in replacement). Разработчикам не нужно переписывать ни единой строчки в интерфейсных компонентах: сигнатура функции, поддержка вложенных массивов, объектов и falsy-значений идентичны.

Миграция начинается с обновления слоя вспомогательных утилит в проекте:

// src/lib/utils.ts

// Ранее использовалась двойная обертка с двумя внешними пакетами:
// import { clsx, type ClassValue } from "clsx";
// import { twMerge } from "tailwind-merge";
// export function cn(...inputs: ClassValue[]) {
//   return twMerge(clsx(inputs));
// }

// В новой версии достаточно прямого реэкспорта легковесного движка:
export { cn } from "cn";

После этого любой существующий компонент автоматически начинает работать через новый быстрый конвейер:

import React from "react";
import { cn } from "@/lib/utils";

interface MetricBadgeProps extends React.ComponentProps<"span"> {
  status?: "success" | "warning" | "error";
  isLive?: boolean;
}

export function MetricBadge({
  status = "success",
  isLive = false,
  className,
  children,
  ...props
}: MetricBadgeProps) {
  return (
    <span
      className={cn(
        // Базовая геометрия и типографика
        "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold tracking-wide transition-all",
        // Цветовые схемы статуса
        status === "success" && "bg-emerald-50 text-emerald-700 border border-emerald-200",
        status === "warning" && "bg-amber-50 text-amber-700 border border-amber-200",
        status === "error" && "bg-rose-50 text-rose-700 border border-rose-200",
        // Динамический модификатор активности
        { "animate-pulse ring-2 ring-emerald-400/50": isLive },
        // Внешний класс гарантированно переопределит дефолтные отступы (например, px-4 py-2)
        className
      )}
      {...props}
    >
      {isLive && <span className="w-1.5 h-1.5 rounded-full bg-current" />}
      {children}
    </span>
  );
}

Для проектов на базе shadcn/ui процесс перехода автоматизирован: достаточно запустить официальную утилиту миграции npx shadcn@latest migrate cn, которая обновит зависимости в package.json и файл lib/utils.ts. Библиотека также полностью готова к Tailwind CSS v4, поддерживая директиву @theme и настройку нестандартных префиксов классов через конфигурационный модуль cn/config.

Практический вердикт

Библиотека cn — редкий пример инструментального обновления, которое дает мгновенный измеримый выигрыш без компромиссов в функциональности. Если ваш проект активно использует Tailwind CSS и React, Vue или Svelte, переход на cn устраняет скрытый мусорный оверхед в основном потоке рендеринга и заметно снижает нагрузку на процессор мобильных клиентов. Это чистое архитектурное улучшение, внедрение которого занимает ровно две минуты.