Разделение кода Webpack, вызывающее скачкообразную анимацию при изменении маршрута?

Question

Так я использую код расщепление, чтобы разделить мои (довольно большие) приложения на управляемые куски, например, так:

const getSettings = (nextState, cb) => { 
    require.ensure([], require => { 
    cb(null, require('../containers/Settings/Settings')) 
    }, 'settings') 
} 

Это, вероятно, довольно зачаточном способ получения Webpack разделить на определенные моменты, но это работает для я до сих пор.

Однако, я достиг серьезного отставания. Поскольку эти куски обязательно асинхронны, при вводе маршрута, который зависит от невостребованного фрагмента, фактический маршрут изменяется (через react-router), но для фактических компонентов для детей требуется несколько секунд, что оставляет изменчивую анимацию.

Как я могу заставить react-router не стрелять LOCATION_CHANGE, пока не будут загружены все необходимые куски?

Я использую react-router 3.0.0 и webpack 1.13.2

Answer 1

Я столкнулся с этим же вопросом, используя require.ensure с getComponent с React Router 3. Мое решение кажется грязным, но он работает. У меня есть места, где я предварительно собираю пакет компонентов, чтобы они были доступны для маршрутов при их создании.

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

Answer 2

Итак, как и ожидалось, в сообществе было очень мало документации/информации по такой проблеме ниши, как эта.

Способ, которым я обходился, был проще, чем ожидалось: я просто слушал изменения в моих дочерних компонентах верхнего уровня App, в отличие от изменений маршрута, поскольку нельзя было доверять изменениям маршрута.

Так это выглядит примерно так:

<FadeProps animationLength={40}> 
    <main style={styles.appContent} key={children.type.displayName}> 
    {route.status === 200 && children} 
    {route.status === 404 && <NotFound />} 
    </main> 
</FadeProps> 

Обратите внимание на ключ является this.props.children.type.displayName, который будет только на самом деле изменится, когда фрагмент был загружен и компонент доступен. Я заметил 2-4 рендера с старым компонентом в новом местоположении маршрута, поэтому дети - это единственные данные, которым действительно можно доверять.