Последние несколько дней я боролся за то, чтобы устранить флеш страницы.Мой проект начался с create-реакции-приложения, затем я использовал help для настройки SSR и других опций.Когда я начал сталкиваться с проблемами, я урезал свой код и выбросил. Вот мой код. Вы можете создать с npm run build и запустить SSR с npm run serve.Посетите http://localhost:3000/, чтобы увидеть результат.
В моем приложении есть два маршрута: Home и About.
Переход к / (Home) работает как нужно: react-loadableидентифицирует пакет home, вставляет для него тег <script> и отправляет страницу за дверь.Клиент загружает все пакеты и реагирует на них без флеш-памяти.
Переход к / о результатах приводит к флеш-странице (убедитесь, что страница загружена с сервера, чтобы увидеть это).Я добавил импорт для moment-timezone в компонент about, и webpack ловко перемещает его в свой собственный пакет, отдельно от пакета about.Проблема в том, что react-loadable видит только то, что ему нужен пакет about, а не дополнительный пакет, содержащий момент-время.Таким образом, на стороне клиента, когда на него вступает реакция, он видит, что отсутствует модуль, очищает страницу, загружает пакет, содержащий отсутствующий модуль, а затем повторно выполняет рендеринг (по крайней мере, я думаю, что так оно и работает).
Чего мне не хватает?Я использую плагины babel и webpack, как описано в React-Loadable Readme.Кажется, что React-Loadable достаточно умен, чтобы углубиться на один уровень и не увидеть, каковы зависимости импортируемого модуля, но, конечно, это не так, не так ли?