Как отладить неожиданный промежуток времени в сетевых операциях браузера в ReactJs / Redux?

Question

Я использую React / Redux для своего приложения, приложение включено в файл main.5ae1d536.js. Как видите, между загрузкой приложения и остальными загрузками существует довольно большой разрыв (почти 1 секунда!). Остальные загрузки - это в основном изображения и другие HTTP-запросы, которые снимаются при запуске приложения.

Я много тестировал приложение React и уверен, что все работает нормально. И все же я не могу понять, что это за пробел, избавиться от него или хотя бы уменьшить его, что значительно улучшит время отклика в моем приложении.

Что ты думаешь?

Обновление, включая скриншот профиля. Способ запуска остальных загрузок осуществляется с помощью различных методов жизненного цикла componentDidMount. Другие, похоже, запускаются Modernizr, как показано на скриншоте, или являются вызовами для получения файлов шрифтов или изображений, необходимых для React-сгенерированного HTML.

Answer 1

Вы должны использовать рендеринг вашего приложения на стороне сервера. Затем браузер получает соответствующий HTML и может немедленно запросить дополнительные ресурсы (поскольку они связаны с созданным HTML). Без ssr браузер должен сначала загрузить и запустить JS, прежде чем можно будет определить и запросить дополнительные ресурсы.

Возьмите гугл для рендеринга на стороне сервера. Это немного сложно настроить, но стоит поторопиться, так как это также улучшает рейтинг в Google. Без ssr Google просто видит пустую страницу, так как не оценивает JS.