Webpackコードの分割は、ルート変更時に不安定なアニメーションを引き起こしますか？

Question

そのようなので、私は、管理しやすいチャンクに私の（かなり大きい）アプリケーションを分割するためのコード分割を使用しています：

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

これはおそらく、特定の時点で分割するのWebPACKを取得するのはかなり初歩的な方法ですが、それはのために働いています私はこれまで通り。

しかし、私は深刻な後退に達しました。これらのチャンクは必ず非同期であるため、フェッチされていないチャンクに依存するルートを入力すると、実際のルートは（react-routerを介して）変更されますが、実際の子コンポーネントが更新されるまでに数秒かかり、

react-routerは、すべての必要なチャンクがロードされるまで、LOCATION_CHANGEを強制的に起動させないようにするにはどうすればよいですか？私は私が私のソリューション3.ルータを反応させるのでgetComponentとrequire.ensureを使用してこの同じ問題に遭遇したreact-router 3.0.0とwebpack 1.13.2

Answer 1

を使用しています

が汚れているようだが、それは作業を行います。私は、コンポーネントのバンドルをプリフェッチする場所を用意して、インスタンス化されたときにそれらのルートで利用できるようにしています。

コンポーネントをインポートして実行するだけの機能です。私は目標であると仮定しているあなたの最初の負荷を減らします。

Answer 2

このように、このようなニッチな問題については、予想通り、コミュニティからのドキュメンテーション/情報はほとんどありませんでした。

私が周りを回った方法は予想よりも簡単でした。ルート変更が信頼できないため、ルート変更とは対照的にトップレベルのAppコンポーネントの子供の変更を聴いたところです。キーは、チャンクがロードされ、コンポーネントが利用可能なされた場合にのみ、実際に変更されますthis.props.children.type.displayName、ある

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

お知らせ：

だから、それは次のようになります。私は新しい経路の場所に旧コンポーネントを2〜4レンダリングしていることに気づいていたので、実際に信頼できる唯一のデータは子供です。