Уменьшение размеров бандлов с помощью Webpack Analyzer и React Lazy/Suspense

[JustDont]

Здесь использовался пакет lottie-web, что добавляло к размеру бандла 61.45 Кб.

В дополнение к пакету lottie-web у меня был ещё и JSON-файл с описанием анимации. Размер этого файла составлял 26 Кб.

Если кому-то нужно 26Кб для того, чтоб описать анимацию одного простенького компонента, а потом еще 62Кб, чтоб эти 26Кб начали что-то делать — имхо, проблема тут вовсе не в размерах зависимостей и отложенных загрузках.

[pettay1992]

Согласен, для появления попапа можно было обойтись и без lottie и JSON'a)
Но все же, в данной статье можно абстрагироваться именно от анимации (это просто пример), а сосредоточиться именно на использовании Webpack Analyzer и React Lazy/Suspense, думаю автор именно это и имел ввиду.

[noodles]

Технологии React Lazy/Suspense приходят на помощь

А уже можно нормально использовать в продакшене, или ещё подождать с пол годика? Интересен опыт, кто использовал.

[t_kanstantsin]

Использовал Lazy и Suspense, чтобы отделить загрузку графиков. А потом понадобилось сделать SSR.
Suspense можно подключить с помощью react-async-ssr, а как вернуть lazy (который и позволяет разделять js файлы) так и не нашёл.

[Valery4]

Есть решения типа github.com/smooth-code/loadable-components

[Fragster]

Переходите на vue, там это реализовано.