Высокоэффективное хранение данных в брузере

У меня есть приложение PWA на React + Redux. Это мессенджер.

Структура данных простая:

{
    chats: { 
        [hash: string]: ChatType 
    },
    messages: { 
        [hash: string]: { 
            [id: number]: MessageType 
        } 
    }
}

Также я использую ReduxPersistor. Проблема следующая:

Пользователь может не закрывать вкладку несколько дней, при этом активно переписывась. Соответственно, может накопиться под 10000+ сообщений и 1000+ чатов (чаты не так часто увеличиваются).

Объект получается под 30-50мб. Из-за этого каждая итерация ReduxPersistor на сохранение в IndexedDB может занимать до 2-3с. Что очень много, особенно на слабых мобильных устройствах.

Поэтому я начал понимать, что такое хранение данных не очень эффективно. Может кто-то подсказать (статьи, книги или что-то другое) как правильно хранить данные в мессенджере, чтобы я мог пользоваться и получать доступ к сообщениям как с сетью, так и без.