Спойлер: просто работает
Если вы следите за последними новостями о JavaScript, возможно, вы видели эту статью Джеймса Кайла о его проекте React Loadable, который устанавливает новый шаблон использования dynamic import(...)
для получения React компонентов и отображать индикаторы загрузки во время загрузки.
Мне особенно нравится этот рисунок, иллюстрирующий разницу между а) использованием динамического import(...)
на уровне маршрутизации и б) его использованием на уровне компонентов:
Тестирование реактивной загрузки с помощью Meteor 1.5
Мне, естественно, было любопытно, будет ли react-loadable
работать в Meteor 1.5-beta.10, поскольку Meteor должен иметь возможность в полной мере использовать эти более мелкие группы модулей. Итак, сегодня утром я начал с репозитория react-loadable-example
и попытался превратить его в типичное приложение Meteor.
Я рад сообщить, что преобразование прошло успешно, как вы можете видеть по изменениям, которые я внес. Эти изменения были довольно предсказуемыми:
- Заимствование каталога
.meteor
из свежего приложения Meteor 1.5: meteor / react-loadable-example @ 2ea8ad5 - Реорганизация кода примера для получения типичной структуры приложения Meteor (директории
client
иimports
, HTML в стилеstatic-html
и т. Д.): Meteor / react-loadable-example @ 707028d - Избавляемся от ненужных зависимостей 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.