Спойлер: просто работает

Если вы следите за последними новостями о JavaScript, возможно, вы видели эту статью Джеймса Кайла о его проекте React Loadable, который устанавливает новый шаблон использования dynamic import(...) для получения React компонентов и отображать индикаторы загрузки во время загрузки.

Мне особенно нравится этот рисунок, иллюстрирующий разницу между а) использованием динамического import(...) на уровне маршрутизации и б) его использованием на уровне компонентов:

Тестирование реактивной загрузки с помощью Meteor 1.5

Мне, естественно, было любопытно, будет ли react-loadable работать в Meteor 1.5-beta.10, поскольку Meteor должен иметь возможность в полной мере использовать эти более мелкие группы модулей. Итак, сегодня утром я начал с репозитория react-loadable-example и попытался превратить его в типичное приложение Meteor.

Я рад сообщить, что преобразование прошло успешно, как вы можете видеть по изменениям, которые я внес. Эти изменения были довольно предсказуемыми:

  1. Заимствование каталога .meteor из свежего приложения Meteor 1.5: meteor / react-loadable-example @ 2ea8ad5
  2. Реорганизация кода примера для получения типичной структуры приложения Meteor (директории client и imports, HTML в стиле static-html и т. Д.): Meteor / react-loadable-example @ 707028d
  3. Избавляемся от ненужных зависимостей Babel / Webpack и файлов конфигурации (мой любимый коммит): meteor / response-loadable-example @ 1d5a12d

Теперь эти изменения были необходимы только потому, что я начинал с существующего приложения на основе Webpack / Babel. Если у вас уже есть приложение Meteor или вы начинаете его с нуля, вам нужно просто meteor npm install --save react-loadable и начать писать код с помощью компонента Loadable, и в этом случае ни одно из этих изменений не потребуется.

Приложение react-loadable-example использует yarn вместо npm, что отлично работает с Meteor, хотя мы рекомендуем использовать meteor yarn, чтобы гарантировать правильную версию Node. Если вы еще не используете meteor yarn, просто meteor npm install --global yarn, чтобы он заработал.

Попробуйте сами!

Если вы хотите самостоятельно опробовать пример приложения, просто выполните следующие действия из файла README.md:

git clone [email protected]:meteor/react-loadable-example.git
cd react-loadable-example
meteor npm install --global yarn # if necessary
meteor yarn
meteor run

Откройте localhost: 3000 в своем браузере и посмотрите на Загружено! текст. Если вы посмотрите очень внимательно, вы увидите, что "Идет загрузка…" на короткое время перед надписью "Загружен!" заменяет его. Задержка довольно короткая, но тоже искусственная. Вы бы вообще не смогли увидеть индикатор Загрузка…, если бы задержка в 400 мс не была включена в демонстрационных целях.

Как бы я ни был взволнован тем, что react-loadable работает в Meteor 1.5, ваш опыт может отличаться от моего, поэтому я призываю всех поиграть с этим примером приложения или попробовать react-loadable в своих собственных приложениях на основе React. Если вас что-то смущает, ваш отзыв (на GitHub) напрямую улучшит Meteor 1.5.