Интеграция внешних файлов в JS-приложениях

Как загрузить asset-файл по требованию?

Динамический импорт с помощью import() позволяет загрузить ресурс асинхронно, когда он действительно нужен. Это уменьшает начальный размер приложения.

// Асинхронная загрузка изображения
async function loadImage() {
  const { default: imgUrl } = await import('./assets/banner.png');
  document.getElementById('banner').src = imgUrl;
}

// Динамический импорт JSON
const data = await import('./data.json');
console.log(data.default);
  

Resource js (ресурсы javascript (resource))

Подходит для ленивой загрузки тяжелых ресурсов (изображения большого размера, шрифты, конфиги).

Как прочитать JSON или текст без сборщика?

Для загрузки данных (JSON, текст, CSV) в чистом JavaScript без этапа сборки используется Fetch API. Этот метод универсален, но возвращает содержимое, а не URL.

// Получение JSON
fetch('./data/config.json')
  .then(response => response.json())
  .then(config => console.log(config.apiUrl))
  .catch(error => console.error('Ошибка загрузки', error));

// Получение текста
const text = await fetch('./README.txt').then(r => r.text());
  

Для изображений fetch с последующим созданием blob URL (URL.createObjectURL) позволяет динамически показывать картинки, загруженные с сервера.

Как получить абсолютный URL ресурса в модульном окружении?

В средах, поддерживающих ES-модули (например, Vite, браузеры с type="module"), можно использовать new URL() с import.meta.url. Этот способ не требует сборщика, но выдает строку URL, которую можно использовать в атрибутах src, href или передавать в fetch.

// Получение URL изображения относительно текущего модуля
const imgUrl = new URL('./assets/icon.svg', import.meta.url).href;
const img = new Image();
img.src = imgUrl;
document.body.appendChild(img);

// Для JSON можно получить URL и затем fetch
const jsonUrl = new URL('./data/settings.json', import.meta.url).href;
const settings = await fetch(jsonUrl).then(r => r.json());
  

Подходит для нативных модулей, когда нет этапа сборки, или как дополнение к динамическому импорту.

Как импортировать ресурсы в CommonJS стиле?

В средах, использующих CommonJS (Node.js, старые сборки Webpack с настройками), доступен require(). Для asset-файлов требуется соответствующий загрузчик (например, file-loader), который преобразует вызов require в URL.

// Использование file-loader в Webpack
const logo = require('./assets/logo.png');
console.log(logo); // '/assets/logo.abc123.png'

// Для JSON
const config = require('./config.json');
// или с помощью require.resolve()
  

Этот способ считается устаревшим для современных проектов, но может встречаться в кодовой базе на Webpack 4 или Node.js без возможности перехода на ESM.

Как вставить изображение или скрипт через DOM API?

Самый прямой способ подключения ресурсов - создание HTML-элементов через DOM и установка атрибутов. Этот подход не зависит от модулей и сборщиков, но не дает преимуществ хеширования и путей.

// Добавление изображения
const img = document.createElement('img');
img.src = '/static/images/photo.jpg';
document.body.appendChild(img);

// Динамическая загрузка CSS
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/theme.css';
document.head.appendChild(link);

// Динамическое выполнение скрипта
const script = document.createElement('script');
script.src = '/js/analytics.js';
document.head.appendChild(script);
  

Используется для загрузки внешних скриптов, аналитики, шрифтов. Для динамической замены стилей или картинок.