Как улучшить структуру кода и импорты?

Что проверяют

Есть ли у вас представление о структуре, которая не разваливается к сотому компоненту, и понимаете ли вы, как импорты влияют на бандл и связность кода. Следом обычно спрашивают про циклические зависимости и barrel-файлы.

Как отвечать

• структура по фичам: папки features/cart, features/profile с компонентами, хуками и запросами внутри плюс общий shared для UI-кита и утилит. Раскладка по типам (components, hooks, utils) на большом проекте разносит одну фичу по пяти местам. Для строгих правил слоёв часто берут Feature-Sliced Design;
• публичный API модуля: снаружи фичу импортируют только через её index.ts, внутренности закрыты. Это проверяется правилом линтера, например import/no-restricted-paths;
• алиасы: @/features/cart вместо ../../../. Задаются в paths у tsconfig.json, Next.js читает их сам, в Vite нужен resolve.alias или плагин vite-tsconfig-paths;
• порядок импортов: внешние пакеты, затем алиасы, затем относительные пути, сортировка автоматическая через import/order или Biome. Спорить о порядке на ревью не нужно;
• barrel-файлы: index.ts, который реэкспортирует всё подряд, замедляет сборку и тесты и мешает tree shaking, если в модулях есть побочные эффекты. Для публичного API фичи он полезен, для огромной папки утилит лучше прямые импорты;
• циклические зависимости: ищутся через madge или import/no-cycle, лечатся выносом общего кода на слой ниже;
• бандл: именованный импорт помогает tree shaking только у ESM-пакетов (lodash-es вместо lodash), тяжёлые экраны грузятся через import() и React.lazy, результат проверяется анализатором бандла.

Где спотыкаются

Называют абсолютные импорты оптимизацией производительности. На размер бандла они не влияют, это про читаемость и спокойный перенос файлов.

Думают, что import { debounce } from "lodash" вытащит одну функцию. Пакет в CommonJS так не работает, в бандл уедет вся библиотека.

Заводят barrel на каждую папку и получают циклы через index.ts и медленный запуск тестов, потому что любой импорт тянет за собой полпроекта.