Как измеряется производительность CSS модулей?

Измерение производительности CSS модулей

CSS модули — это система для изоляции CSS стилей на уровне компонента, которая помогает избежать конфликтов имён и случайного перезаписывания стилей. Однако, как любой инструмент, они могут влиять на производительность. Вот как это измеряется и оптимизируется.

Ключевые метрики производительности CSS

1. Размер CSS файлов

Первая метрика — размер итогового CSS при использовании CSS модулей.

// Проверка размера через Webpack Bundle Analyzer
npm install --save-dev webpack-bundle-analyzer

// webpack.config.js
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()]
};

CSS модули генерируют дополнительный код для отображения хеш-функции имён классов. Это увеличивает размер примерно на 5-15% в зависимости от реализации.

/* Исходный CSS модуль */
.button { padding: 10px; }
.active { color: red; }

/* После компиляции (примерно) */
.button__a1B2c { padding: 10px; }
.active__d3E4f { color: red; }

2. Скорость обработки и парсинга

Проверяется скорость, с которой браузер парсит и применяет CSS модули.

// Проверка скорости парсинга CSS
const startTime = performance.now();

// Форсируем перерасчёт стилей (reflow)
const computed = window.getComputedStyle(document.querySelector(".button"));

const endTime = performance.now();
console.log(`CSS parsing time: ${endTime - startTime}ms`);

3. Critical Rendering Path (CRP)

CSS модули могут увеличить Critical Rendering Path, если они генерируют слишком много classNames.

// Lighthouse в DevTools покажет метрики CRP
// Ищи: First Contentful Paint (FCP), Largest Contentful Paint (LCP)

Практические методы измерения

1. Chrome DevTools — Performance вкладка

// Шаги:
// 1. Открыть DevTools -> Performance
// 2. Нажать Record
// 3. Скролл, взаимодействие с элементами
// 4. Stop recording
// 5. Анализировать Rendering и Painting времена

// Ищешь:
// - Rendering time (синий цвет)
// - Painting time (фиолетовый цвет)

2. Lighthouse

// Встроен в Chrome DevTools
// Шаги:
// 1. F12 -> Lighthouse
// 2. Select "Performance"
// 3. Analyze page load
// 4. Смотри metrices: CLS, FID, LCP

3. Custom Performance Measurement

// Измерение время рендера компонента
function measureCSS() {
  performance.mark("css-start");
  
  // Инициализация CSS модулей
  const classNames = require("styles.module.css");
  
  // Применение к DOM
  document.getElementById("app").className = classNames.container;
  
  performance.mark("css-end");
  performance.measure("css-time", "css-start", "css-end");
  
  const measure = performance.getEntriesByName("css-time")[0];
  console.log(`CSS time: ${measure.duration}ms`);
}

Оптимизация CSS модулей

1. Code Splitting и Lazy Loading

CSS модули должны загружаться только тогда, когда нужны.

// Неправильно: все CSS загружается на главной странице
import styles from "./styles.module.css";

// Правильно: lazy load CSS для конкретных маршрутов
const CompComponent = lazy(() => 
  import("./Component").then(m => ({ default: m.default }))
);

// В Next.js используй dynamic
import dynamic from "next/dynamic";

const Component = dynamic(() => import("./Component"), {
  loading: () => <div>Loading...</div>,
  ssr: false
});

2. Минимизация CSS классов

// Неправильно: создаёшь слишком много классов
const styles = require("styles.module.css");

<div className={styles.container + " " + styles.flex + " " + styles.justifyCenter}>

// Правильно: комбинируй классы в CSS модуле
// styles.module.css
.centerContainer {
  display: flex;
  justify-content: center;
}

<div className={styles.centerContainer}>

3. Используй CSS в JS инструменты с оптимизацией

// Вариант 1: Tailwind CSS (встроенная оптимизация)
<div className="flex justify-center px-4 py-2">

// Вариант 2: CSS modules с PurgeCSS
// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  // Автоматически удалит неиспользуемые стили
};

// Вариант 3: CSS-in-JS с автоматической минификацией
import styled from "styled-components";

const Container = styled.div`
  display: flex;
  justify-content: center;
`;

4. Критический CSS (Critical CSS)

// Используй инструмент для извлечения критического CSS
npm install --save-dev critical

// critical.js
const critical = require("critical");

critical.generate({
  inline: true,
  base: "./",
  src: "index.html",
  dest: "index-critical.html",
  width: 1300,
  height: 900
});

Сравнение подходов

// 1. CSS модули
import styles from "styles.module.css"; // +15% размер

// 2. Tailwind CSS (более эффективно)
<div className="flex justify-center"> // +5% размер

// 3. Стилизованные компоненты (CSS-in-JS)
const Button = styled.button`...`; // +10% размер

// 4. Чистый CSS (лучше всего по размеру)
<style>...</style> // +0% размер (но теряешь изоляцию)

Инструменты для профилирования

1. Webpack Bundle Analyzer

npm run build -- --analyze

# или через скрипт
webpack-bundle-analyzer dist/bundle.js

2. Next.js встроенный анализ

// next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({});

ANALYZE=true npm run build

3. CSS stats

// Установка
npm install --save-dev css-stats

// Использование
const css = require("css-stats");
const fs = require("fs");

const cssContent = fs.readFileSync("styles.css", "utf-8");
const stats = css(cssContent);

console.log(`Selectors: ${stats.selectors.length}`);
console.log(`Declarations: ${stats.declarations.length}`);

Реальный пример: оптимизированный компонент

// Неоптимизировано
// component.module.css
.container { ... }
.header { ... }
.body { ... }
.footer { ... }
.button { ... }
.buttonPrimary { ... }
.buttonSecondary { ... }

// Оптимизировано
// component.module.css
.container { ... }
.header { ... }
.body { ... }
.footer { ... }

// button.module.css (отдельный файл для Lazy Loading)
.button { ... }
.primary { ... }
.secondary { ... }

// Component.jsx
import componentStyles from "./component.module.css";
const { Button } = dynamic(() => 
  import("./Button").then(m => ({ 
    default: m.default 
  }))
);

Лучшие практики

1. Используй Lighthouse регулярно — отслеживай метрики производительности
2. Code-splitting для стилей — загружай CSS только когда нужен
3. Минимизируй размер CSS — удаляй неиспользуемые стили (PurgeCSS)
4. Lazy load компоненты — вместе со связанными стилями
5. Используй performance.mark — измеряй точное время парсинга CSS
6. Минифицируй и сжимай — gzip для CSS файлов
7. Критический CSS — выделяй самые важные стили для выше-the-fold контента

Заключение

Производительность CSS модулей измеряется через размер файлов, время парсинга браузером, и влияние на Critical Rendering Path. Основные инструменты — Chrome DevTools, Lighthouse, Bundle Analyzer. Правильная оптимизация может сократить размер CSS на 30-50% через code-splitting и lazy loading.