Как оптимизировать загрузку и парсинг больших JS файлов со стороны браузера/клиента?

Question

[mnnoee]

Есть скрипт

#!/bin/bash

GALLERY_DIR="./gallery"
OUTPUT_FILE="./gallery/gallery-data.js"

echo "const galleryData = [" > "$OUTPUT_FILE"

while IFS= read -r -d '' img; do
    filename=$(basename -- "$img")
    name_no_ext="${filename%.*}"
    md5_value=$(md5sum "$img" | awk '{print $1}')

    printf "  {\n" >> "$OUTPUT_FILE"
    printf "    i: \"%s\",\n" "$filename" >> "$OUTPUT_FILE"
    printf "    t: \"%s\",\n" "$name_no_ext" >> "$OUTPUT_FILE"
    printf "    d: \"\",\n" >> "$OUTPUT_FILE"
    printf "    s: \"%s\"\n" "$md5_value" >> "$OUTPUT_FILE"
    printf "  },\n" >> "$OUTPUT_FILE"
done < <(find "$GALLERY_DIR" -maxdepth 1 -type f \( -iname "*.webp" -o -iname "*.jpg" -o -iname "*.png" \) -print0)

echo "];" >> "$OUTPUT_FILE"

Который генерирует файл JS формата с последующей её загрузкой у клиента.

Выхлоп этого js следующий:

const galleryData = [
  {
    i: "/gallery/123123.webp",
    t: "можно менять",
    d: "и описание тоже",
    s: "3b10082cf3075f2e6a57deab33f5868d"
  }
];

Я понимаю, что эту систему можно увеличить хоть до 10тысяч фотографий, но размер в 10мб~ будет велик, если я правильно считаю

Как это все оптимизировать можно?

Код который хавает данные объекты их генерирует до бесконечности, то есть не каждый браузер сможет отобразить все 10к фоток
А если сделать ленивую загрузку? Даже с кешированием, через brotli/gzip?

Этот проект скорее для самого себя чем в продакшн, я не знаю что делать.
Да, я пробую только в грубую статику, только хардкор и генерация на стороне клиента

Буду рад любой идеи, как реализовать.. разбиение js-database и скорее их ленивой загрузки, но без разбиения основного файла
Так как сама цель иметь тьму объектов и статика, полностью статика.

Answer 1

[Сергей delphinpro]

Совершенно непонятно, зачем на одной странице нужны 10 тыс фоток.
Во-первых, столько физически не поместится даже на три-пять экранов.
Во-вторых, человек в принципе не способен воспринимать такое количество информации одновременно.
Скорее всего, мне думается, это просто лента фотографий, которая "бесконечно" прокручивается для просмотра.
Вот из этого и нужно исходить.

Сложить список файлов в базу данных.
Загружать небольшое количество, ну скажем 50-100 изображений.
По мере прокрутки страницы подгружать еще сотню следующих. Предыдущие удалять. При прокрутке в обратную сторону подгружать предыдущие, а ушедшие из зоны видимости удалять.
И никакой нагрузки на браузер не будет, и визуально будет казаться, что все фото присутствуют на странице.

Comments

[mnnoee]

Мне тоже непонятно зачем так много, но я не знаю, может когда фотографий будет > 1000 я захочу полностью переписать логику скриптов для их прорисовки.

За идею загружать 50-100 изображений, а затем выгружать - спасибо
+- это подходит под эти самые реалии, чтобы не перегружать количеством фотокарточек браузер.

Answer 2

[rPman]

Постарайтесь не закладывать нагрузку на браузер, хотя 10мб json это большие но не фатальные размеры. Скорее всего проблема не в json а

браузер сможет отобразить все 10к фоток

и да, естественно, сделайте ленивую загрузку фото.

Answer 3

[alekssamos]

Если статика, то генерировать много маленьких пронумерованных json. photos1.json, photos2.json, photos68.json...
И если однажды мы при увеличении цифры получим 404, значит, скорее всего, фотки закончились.
Перед новой генерацией зачистить тоже легко: rm -f photos*.json

Answer 4

[VoidVolker]

1. Установить NodeJS
   
2. Установить MongoDB
   
3. Установить Mongoose или любую другую ORM
   
4. Написать простейшие контроллёры для вашего API
   
5. Запустить сервис на VPS и использовать для ваших задач