Как полностью предварительно загрузить сайт React с SSR? - PullRequest
Новая
       13

Как полностью предварительно загрузить сайт React с SSR?

0 голосов
/ 30 ноября 2018

Я пытаюсь создать предварительный загрузчик для небольшого сайта, созданного с помощью React.Я ожидаю, что preloader предварительно загрузит все ресурсы, такие как изображения, шрифты и файлы JS, включая сам этот bundle.js.

Мое намерение состоит в том, чтобы пользователь увидел предварительный загрузчик при первом входе на сайт во время загрузки активов.Как только сайт будет полностью загружен, будет отображаться реальный сайт.Подумайте о том, какие прелоадеры мы видели на тех старых сайтах Flash.

Однако я не уверен, как мне это сделать.Один из методов, которые я пробовал, использует import() в компоненте entry, который загружает фактический основной компонент, содержащий содержимое.Примерно так в компоненте ввода: 

const load = () => import('./MainSite')
load().then((comp) => {
  //render comp in render()
})

Хотя это делит MainSite.js, который имеет основное содержимое и ссылки на все остальные сайты, в отдельный блок, у меня все еще есть 3 проблемы сэтот метод:

  1. Основной bundle.js по-прежнему составляет 600 КБ, тогда как 0.chunk.js этого MainSite.js составляет всего 100 КБ.Это только предварительно загружает 100 КБ.Пользователь по-прежнему должен ждать загрузки 600 КБ при входе на сайт.
  2. Этот метод также портит SSR.Весь контент в MainSite.js не отображается на сервере.Таким образом, SSR отсутствует.
  3. Это только предварительно загружает файл чанка JS.Изображения, шрифты, CSS и т. Д. Предварительно не загружаются.

Как лучше всего полностью предварительно загрузить сайт React, избегая при этом 3 проблемы?

...