JavaScript и статические файлы: как правильно организовать работу с ассетами

Расширенные примеры работы с ассетами

1. Импорт нескольких изображений с динамическими именами в Vite

// src/utils/importAll.js
// Функция для импорта всех изображений из папки assets
function importAll(r) {
  let images = {};
  r.keys().forEach((item) => {
    images[item.replace('./', '').replace(/\.[^/.]+$/, '')] = r(item);
  });
  return images;
}

const images = importAll(require.context('../assets', false, /\.(png|jpg|svg)$/));
console.log(images);
// { "logo": "/assets/logo.abc123.png", "bg": "/assets/bg.def456.jpg" }

Объект с путями ко всем картинкам в папке assets. Требуется Webpack (Vite использует import.meta.glob).

2. Использование import.meta.glob в Vite для асинхронной загрузки

// src/components/Gallery.js
const images = import.meta.glob('../assets/gallery/*.jpg');
// import.meta.glob возвращает объект, где ключ - путь, значение - функция для ленивого импорта

async function loadGallery() {
  const entries = Object.entries(images);
  for (const [path, importFn] of entries) {
    const module = await importFn();
    const imgUrl = module.default;
    const img = document.createElement('img');
    img.src = imgUrl;
    document.body.appendChild(img);
  }
}
loadGallery();

При активации функции загружаются только те изображения, которые были запрошены (ленивая загрузка).

3. Преобразование изображения в base64 для вставки в HTML

async function toBase64(url) {
  const res = await fetch(url);
  const blob = await res.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

toBase64('https://via.placeholder.com/100')
  .then(dataUrl => {
    document.getElementById('preview').innerHTML = `<img src="${dataUrl}" alt="placeholder">`;
  });

В результате dataUrl будет длинной строкой base64, которую можно использовать напрямую в src атрибуте (подходит для маленьких изображений).

4. Кэширование ассетов через Service Worker (пример)

// service-worker.js
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/style.css',
        '/app.js',
        '/assets/logo.png'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

После регистрации Service Worker статические файлы будут загружаться из кэша браузера при повторных посещениях, ускоряя загрузку.

5. Генерация спрайтов (сборка нескольких иконок в один файл)

// Используется плагин webpack-spritesmith, но можно и вручную:
// 1. Создать изображение-спрайт (1024x64)
// 2. В CSS указать background-position для каждой иконки
// 3. В JavaScript получить элемент и установить background-image

const sprite = new Image();
sprite.src = '/sprite.png';
sprite.onload = () => {
  document.querySelector('.icon-home').style.backgroundImage = `url(${sprite.src})`;
  document.querySelector('.icon-home').style.backgroundPosition = '0 0';
  document.querySelector('.icon-settings').style.backgroundPosition = '-32px 0';
};

Эффективно для множества мелких иконок - уменьшает количество HTTP-запросов.

6. Работа с путями ассетов в Next.js (сторонний сервер)

// pages/api/file.js
import fs from 'fs';
import path from 'path';

export default function handler(req, res) {
  const filePath = path.join(process.cwd(), 'public', 'images', 'example.jpg');
  const imageBuffer = fs.readFileSync(filePath);
  res.setHeader('Content-Type', 'image/jpeg');
  res.send(imageBuffer);
}

API-маршрут отдаёт статическое изображение. Применяется для динамического выбора файлов или ограничения доступа.