Оптимізація роботи з ресурсами в Vite: вирішення проблеми з відсутніми зображеннями

3 Березня 2024 в 17:16 28

Під час розробки веб-застосунків з використанням фреймворку Vite можуть виникати ситуації, коли запити до відсутніх ресурсів, зокрема зображень, не повертають очікувану помилку 404, а замість цього відображають вміст файлу index.html. Це може ускладнювати відлагодження та призводити до плутанини в процесі розробки. У цій статті ми розглянемо проблему більш детально та запропонуємо ефективне рішення, щоб забезпечити коректну поведінку сервера і повертати помилку 404 при відсутності зображень.

Суть проблеми полягає в тому, що Vite, як засіб для швидкої розробки та веб-перегляду, має за мету спростити процес розробки, зокрема інтеграцію з односторінковими застосунками (SPA). Однак, за замовчуванням, коли ви розробляєте веб-застосунок з Vite, всі запити до відсутніх ресурсів, таких як зображення, спрямовуються на index.html замість очікуваної помилки 404. Це може бути зручно для SPA, але у разі розробки традиційних веб-сайтів або застосунків може призвести до неправильного розуміння проблеми та ускладнення відлагодження.

Для вирішення цієї проблеми ми можемо скористатися можливостями Vite та створити власний плагін, який буде перехоплювати запити до статичних ресурсів, таких як зображення, та перевіряти їх наявність. Якщо ресурс відсутній, сервер повертатиме відповідь з кодом помилки 404. Давайте розглянемо детальніше, як це можна зробити.

import { defineConfig } from 'vite';
import fs from 'fs';
import path from 'path';
export default defineConfig({
  plugins: [{
    name: 'handle-missing-images',
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.url.endsWith('.jpg') || req.url.endsWith('.png')) {
          const filePath = path.resolve(__dirname, 'public', req.url);
          if (!fs.existsSync(filePath)) {
            res.statusCode = 404;
            res.end(`File not found: ${req.url}`);
            return;
          }
        }
        next();
      });
    },
  }],
});

import { defineConfig } from 'vite';

import fs from 'fs';

import path from 'path';

export default defineConfig({

plugins: [{

name: 'handle-missing-images',

configureServer(server) {

server.middlewares.use((req, res, next) => {

if (req.url.endsWith('.jpg') || req.url.endsWith('.png')) {

const filePath = path.resolve(__dirname, 'public', req.url);

if (!fs.existsSync(filePath)) {

res.statusCode = 404;

res.end(`File not found: ${req.url}`);

return;

}

next();

});

}],

});

У цьому коді ми створюємо плагін для Vite, який перевіряє кожний запит до зображень (.jpg або .png) на їх наявність у вказаній директорії. Якщо файл не знайдено, сервер повертає відповідь з кодом 404, інакше процес продовжується нормально. Варто зазначити, що цей плагін можна модифікувати для перевірки інших типів файлів або для виконання додаткових дій, які можуть бути потрібні в вашому проєкті.

Застосування цього підходу дозволяє покращити процес розробки та відладки веб-застосунків з використанням Vite, забезпечуючи точніші та передбачувані результати при відсутності ресурсів. Також це допомагає підтримувати стандарти веб-розробки та запобігає можливим неполадкам при переході з режиму розробки на продакшн.