Что делать с файлами в папке public

Папка public/ — это особое место в React-проекте: файлы в ней копируются в корень сборки без обработки, без хеширования и без анализа зависимостей. Они доступны по корневому пути (/filename.ext) и не проходят через сборщик (Webpack/Vite).

Как использовать файлы из public/

Если у вас есть файл public/logo.png, обращайтесь к нему напрямую через корневой путь:

<img src="/logo.png" alt="Логотип" />

Обратите внимание: путь начинается с /, а не с ./. Это означает, что браузер запросит файл по адресу https://ваш-сайт.com/logo.png.

Когда использовать public/

Папка public/ предназначена только для файлов, которые не импортируются в JavaScript-код:

  • favicon.ico — иконка сайта,
  • robots.txt — инструкции для поисковых роботов,
  • manifest.json — метаданные для PWA,
  • sitemap.xml — карта сайта,
  • Статические файлы, доступные по прямой ссылке (например, public/docs/instruction.pdf).

Эти файлы должны быть доступны по фиксированному пути и не зависят от логики приложения.

Когда НЕ использовать public/

Не кладите в public/ изображения, шрифты, аудио или другие ресурсы, используемые в компонентах. Причины:

  • Сборщик не знает, что они нужны — не проверяет наличие, не удаляет неиспользуемые,
  • Нет хеширования → браузер может кэшировать старую версию навсегда,
  • Нарушается модульность: компонент зависит от глобального состояния файловой системы,
  • При переименовании файла — ошибка обнаружится только вручную, не на этапе сборки.

Например, <img src="/assets/logo.png" /> с файлом в public/assets/logo.png — плохая практика. Правильно: импортировать из src/assets/.

Как проверить, нужен ли файл в public/

Задайте себе вопрос:

«Будет ли этот файл запрашиваться напрямую по URL, без участия React-кода?»

Если да — кладите в public/.
Если нет — импортируйте из src/.

Использование public/ должно быть исключением, а не правилом.