Введение в импорт в Vite

Импорт умеет не только соседний файл: псевдоним, кусок по запросу, набор файлов, текст и воркер.

Обычный import в начале модуля связывает два файла по относительному пути. Vite сохраняет такую схему на сервере разработки: браузер запрашивает каждый модуль отдельно. При сборке те же связи превращаются в граф, из которого получают файлы для хостинга. Это уже знакомо из точки входа src/main.js и подключённых рядом файлов.

Длинные пути можно сократить через поле resolve.alias в файле настройки. Короткая метка заменяет префикс папки, и строка импорта читается проще, хотя файл на диске лежит там же.

Если модуль нужен не сразу, а после действия пользователя, путь указывают внутри выражения import(). Такой вызов возвращает обещание, и код продолжает работу после загрузки файла. В сборке такой модуль часто становится отдельным куском, который браузер подтягивает по мере надобности.

Когда файлов много и имена заранее известны только по шаблону, помогает import.meta.glob. Одна строка описывает маску, а результат содержит функции для каждого совпадения. Так удобно собирать набор однотипных модулей без ручного перечисления.

Содержимое текстового файла можно взять в код как строку, если к пути добавить суффикс ?raw. Тогда в переменной лежит текст, а не адрес для загрузки. Скрипт воркера живёт в отдельном файле и подключается со страницы через конструктор Worker с суффиксом, который понимает Vite; сборка кладёт такой файл рядом с основным кодом.

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