Работа с ассетами

Ассеты это статические ресурсы, которые использует ваше приложение. В FSD к ассетам применяются те же принципы размещения, что и к коду. Группируйте их по сценарию использования, а не по типу, и держите их рядом с компонентами, которые их используют.

Ассеты конкретного слайса

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

Директорияpages/
- Директорияhome/
  - Директорияui/
    hero-image.jpg
    HomePage.tsx
  - index.ts

Если в вашем UI много статических ассетов, например изображений, вы можете создать подпапку в сегменте ui:

Директорияpages/
- Директорияhome/
  - Директорияui/
    Директорияpreviews/
    cake.jpg
    pizza.jpg
    …
    HomePage.tsx
  - index.ts

Ассеты, не связанные с UI

Иногда ассет не является частью UI, но при этом играет важную роль в бизнес-логике. Рассмотрим пример:

Директорияfeatures/
- Директорияbilling/
  - Директорияmodel/
    invoice-template.pdf
    create-invoice.ts
  - index.ts

Здесь invoice-template.pdf тесно связан с бизнес-логикой в create-invoice.ts. В таких случаях предпочтительнее поместить файл в сегмент model, чтобы сохранить высокую связность и локализовать изменения.

Общие ассеты

Если статический ассет используется несколько раз, вы можете переместить его в shared/ui, чтобы он был доступен всем остальным частям приложения.

Директорияshared/
- Директорияui/
  - Директорияplaceholders/
    cake.jpg
    pizza.jpg
    …

Тот же подход применим и к статическим ассетам, которые используются общими компонентами:

Директорияshared/
- Директорияui/
  - Dropdown.tsx
  - chevron.svg

Глобальные ассеты

К глобальным ассетам относятся такие вещи, как глобальные стили (например, CSS reset) и шрифты. Слой app подходящее место для этих файлов, поскольку они используются только входной точкой приложения.

Директорияapp/
- Директорияstyles/
  - reset.css
  - global.css
- main.ts

Папка public

Большинство бандлеров и фреймворков предусматривают папку public в корне проекта. Файлы из неё отдаются как есть, без какой-либо обработки.

Некоторые инструменты сборки, например Vite, позволяют изменить расположение папки public, а другие, например Astro, такой возможности не дают. Если ваш инструмент сборки не поддерживает такое изменение — ничего страшного. Папка public не является частью структуры FSD и не приведёт к конфликтам имён.

Итоги

Тип ассета	Расположение
Ассеты конкретного слайса	Внутри слайса (например, `pages/home/ui/`)
Переиспользуемые иконки и изображения	`shared/ui/`
Глобальные стили	`app/styles/`
Шрифты	`app/fonts/`, `public/` или `app/public`
Статические файлы, фавиконка	`public/` или `app/public`

Придерживайтесь принципа FSD: размещайте ассеты там, где они используются, и перемещайте их в shared, только когда действительно возникает необходимость переиспользования между слайсами.