Двойные теги сценария для маршрута, запрошенного в SSR

У меня есть репозиторий SSR (inferno-react как lib), связанный с использованием webpack. Он имеет 2 файла маршрута, 1 для сервера и 1 для клиента, точно такие же, но фрагментация происходит на стороне клиента с использованием require.ensure. Один из маршрутов выглядит так:

<Route path="/home" getComponent={(props, cb) => {      
  require.ensure([], require => cb(null, 
  require('../views/containers/Home').default), 'home');
}}/>

Это означает, что когда браузер будет анализировать .html, а bundle.js будет загружен в браузер, веб-пакет затем вставит тег .jsscript компонента фрагментированного маршрута в html, и затем он будет загружен. Но это немного замедляет его, так как .js этого маршрута загружается только после загрузки bundle.js... Итак, я вручную добавляю тег скрипта с сервера для любого запрошенного фрагмента маршрута динамически с помощью webpack-manifest-plugin. Но теперь для каждого запрошенного маршрута у меня есть двойные теги script в файле .html для этого фрагментированного компонента. Один из-за ручного добавления на сервер и один, когда мы создаем чанк в веб-пакете, используя require.ensure.

Все работает, но прекрасно 2 тега сценария! :/

Есть ли способ избежать этого или как еще я могу справиться с этим, сохраняя фрагментацию на стороне клиента.


person master_dodo    schedule 14.08.2017    source источник


Ответы (1)


Если вы не хотите загружать чанк асинхронно, я бы отказался от require.ensure и просто использовал require, чтобы код был включен в ваш основной пакет. Тогда вам не нужны никакие теги script, кроме включения основного пакета.

В противном случае, если вы хотите использовать фрагменты для разделения кода для разных страниц, используйте вторую точку входа вместо автоматически сгенерированных фрагментов.

person Luke H    schedule 20.08.2017
comment
Нужна разбивка, поэтому она была добавлена. Да, многоточечный вход является простым решением и, безусловно, решит проблему, но это то, чего я пытаюсь избежать, потому что добавление каждого нового маршрута приведет к изменению добавления/удаления в веб-пакете, которого я думал избежать. - person master_dodo; 21.08.2017
comment
Используя именованные фрагменты, вы не можете использовать только статический тег сценария (например, вставлять в html вручную) вместо вставки с помощью плагина манифеста? Или это необходимо из-за использования хэшей cachebuster в именах пакетов? Я признаю некоторую путаницу в отношении того, что вы здесь делаете на сервере. - person Luke H; 21.08.2017
comment
Может показаться, что это не имеет никакого отношения к очистке кеша, мне просто нужно точное имя файла. Цель состоит только в том, чтобы он не ждал загрузки bundle.js до того, как будет запрошен мой фрагмент. Чтобы дать вам больше информации, мой маршрут сервера выглядит так: <Route path="/home" component={ Home } filename="home.js"/> И когда я получаю отображение как home.js : home_hash.js во время сборки с помощью плагина манифеста, я использую filename реквизиты, чтобы получить точное имя файла из этого сопоставления ключ-значение, чтобы вставить фактический файл в тег скрипта (отложить и добавить после тега скрипта bundle.js) в html для запрашиваемого компонента (чанка). - person master_dodo; 22.08.2017
comment
Главное преимущество чанков в том, что их можно загружать по мере необходимости. Если вы все равно хотите предварительно загрузить этот код, зачем использовать его в виде фрагмента? Похоже, вы беспокоитесь о времени сборки, если я правильно вас понимаю? Если вы хотите точное имя файла и не беспокоитесь о кеше, используйте home.js без хэша. Не уверен, что смогу помочь, извините! - person Luke H; 22.08.2017
comment
Пожалуйста, прочитайте еще раз! Я никогда не упоминал, что все мои скрипты фрагментов добавляются в html сразу!! Только тот скрипт записи чанка добавляется как тег скрипта, который в данный момент запрашивается с сервера. Это прирост производительности при первой отрисовке. А в СПА может существенно помочь. И снова мой вопрос не в том, чтобы получить точные имена файлов. Я хочу просто написать некоторый код в route.js, чтобы сказать, что не вставляйте тег скрипта для FIRST LOAD, потому что он может с уверенностью предположить, что сервер уже это сделал. - person master_dodo; 23.08.2017
comment
Ну, я бы все же посоветовал прекратить использовать require.ensure, если вы сами загружаете пакет. Просто используйте require. В любом случае, второй тег script не должен иметь большого значения; Вы должны просто нажать на кеш браузера, нет? - person Luke H; 23.08.2017
comment
:D require.ensure нужен, когда клиент возьмется за дело, приятель! Я знаю о загрузчике пакетов. Насколько я знаю, это то же самое, что и вставка тега сценария. - person master_dodo; 23.08.2017
comment
Я думаю, что мы плохо понимаем друг друга; извини не смог помочь! - person Luke H; 24.08.2017