Что такое барьерный паттерн (barrel pattern) в модулях?

// ❌ Без barrel — много длинных путей
import { Button } from "./components/Button/Button.js";
import { Input } from "./components/Input/Input.js";
import { Modal } from "./components/Modal/Modal.js";
import { Tooltip } from "./components/Tooltip/Tooltip.js";

// components/index.js — barrel файл
export { Button } from "./Button/Button.js";
export { Input } from "./Input/Input.js";
export { Modal } from "./Modal/Modal.js";
export { Tooltip } from "./Tooltip/Tooltip.js";

// ✅ С barrel — один импорт
import { Button, Input, Modal } from "./components";

// utils/index.js
export { formatDate, parseDate } from "./date.js";
export { formatCurrency } from "./currency.js";
export { validateEmail, validatePhone } from "./validation.js";
export { debounce, throttle } from "./timing.js";

// Можно реэкспортировать default как именованный
export { default as Logger } from "./Logger.js";

// Проблема 1: tree shaking может не сработать
// utils/index.js реэкспортирует 50 функций

// Ты используешь одну:
import { debounce } from "./utils";

// Некоторые бандлеры подтянут ВСЁ из index.js, включая тяжёлые зависимости

// Проблема 2: каскадные barrel-файлы
// components/index.js
export * from "./forms"; // forms/index.js тоже barrel
export * from "./layout"; // layout/index.js тоже barrel
export * from "./feedback"; // ...и так далее

// Один import запускает цепную загрузку десятков файлов

// Проблема 3: циклические зависимости
// components/index.js экспортирует Button

// Button внутри импортирует Icon из components/index.js

// Получаем цикл: index -> Button -> index

// ✅ Barrel для публичного API пакета
// src/index.js — точка входа библиотеки
export { createClient } from "./client.js";
export { type Config } from "./types.js"; // TypeScript
export { VERSION } from "./version.js";

// Внутри библиотеки файлы импортируют друг друга напрямую

// ✅ Barrel для группы компонентов (неглубокий)
// components/forms/index.js
export { TextInput } from "./TextInput.js";
export { Select } from "./Select.js";
export { Checkbox } from "./Checkbox.js";

// ❌ НЕ используй barrel для внутренних импортов

// Button.js
import { Icon } from "../index.js"; // цикл!
import { Icon } from "../Icon/Icon.js"; // ✅ прямой путь

// ❌ В Next.js barrel тормозит HMR — загружаются все модули
import { Button } from "@/components"; // index.js тянет всё

// ✅ Next.js рекомендует прямые импорты
import { Button } from "@/components/Button";

// ✅ Или использовать optimizePackageImports в next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ["@/components"],
  },
};

src/
components/
Button/
Button.jsx
Button.test.jsx
Input/
Input.jsx
Input.test.jsx
index.js          <-- barrel для внешних потребителей
utils/
date.js
validation.js
index.js          <-- barrel