Skip to content

[Bug / Performance] Критически долгая загрузка виджета из-за единовременной подгрузки всех ~8000+ ПВЗ #102

Description

@qrver

Описание проблемы

При инициализации виджета происходит единовременная загрузка всех пунктов выдачи (~8000+),
что приводит к критически долгому времени загрузки (16–40 секунд), чрезмерному потреблению
оперативной памяти и зависанию страницы.

Проблема актуальна и воспроизводится даже на официальном демо-сайте виджета.

Шаги для воспроизведения

  1. Подключить виджет стандартным способом согласно документации
  2. Открыть страницу с виджетом
  3. Открыть DevTools → Network / Performance
  4. Наблюдать загрузку и потребление ресурсов

Фактическое поведение

  • Виджет единовременно запрашивает и отрисовывает все ПВЗ (~8000+ точек)
  • Страница зависает из-за высокого потребления RAM при отрисовке точек на карте
  • При переинициализации виджета старые обработчики событий не очищаются — утечка памяти

Замеры от пользователя @FAUSTddd:

Даже демо сайт еле грузит.
132 запроса
25,59 МБ / 5,40 МБ передано
Передано за: 16,91 с
DOMContentLoaded: 896 мс
load: 3,69 с
С каждым днем количество ПВЗ увеличивается.

Ожидаемое поведение

Загрузка ПВЗ должна происходить лениво (lazy) — только для видимой области карты
(viewport-based loading), аналогично тому, как работают Яндекс.Карты, Google Maps и другие
картографические сервисы. Количество ПВЗ продолжает расти, что усугубляет проблему с каждым днём.

Окружение

  • Версия виджета: @cdek-it/widget@3.x (последняя)
  • Воспроизводится в любом современном браузере
  • Воспроизводится на официальном демо-сайте виджета

Предложение / Workaround от сообщества

Участники обсуждения реализовали собственные решения:

  • @uvb-it — переписал виджет с динамической подгрузкой, время загрузки сократилось до <1 секунды
  • @PsiHamster — опубликовал альтернативную реализацию с "парковкой" виджета в фоне и раздельным инпутом города: https://github.com/PsiHamster/fast-cdek-widget

Дополнительный контекст

Скриншоты

изображение изображение изображение

Данный issue был переоткрыт из дискуссии, так как является актуальной проблемой виджета.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions