非同期ルートのプリフェッチリソース

Question

非同期ルートをプリフェッチまたはプリロードする方法はありますか？私はRR2/3でこれをどうやって行うのかを模索しています。基本的な考え方はすべてのルートでコードを分割することですが、そのページを訪れる前に、サービスワーカーの接続ページのバンドルをキャッシュできるようにしたいと考えています。だから、私がしたいのは、レンダリングされるたびに、それがリンクされているページのリソースをキャッシュしようとするカスタム<Link>です。これにより、ページ遷移がかなり速くなります。私が知らないことは、ルートにナビゲートしてエミュレートしてリソースをフェッチする方法があるかどうかです。これを行うためのAPIやこれをやるためのトリッキーな方法がありますか？

Answer 1

リンクがマウントされている場合、タイムアウトでrequire.ensure...セクションを実行するだけで済みます。それはコードを分割して非同期にロードする必要があります。タイムアウトは、別のファイルにロードされることを保証します。

私はRR3で見つけたように、コード分割にRR4を使用することをお勧めします。子ルートが変更された場合は、非同期の必須ルートが再組み込みされ、再レンダリングされます。私の場合は、私のルートのcomponentWillMountを子ルートの変更のために起動しました。例えば/agent/step-1から/agent/step-2に移動すると、/agentのコンポーネントがアンマウントされ、再度マウントされます。

Answer 2

これは私が思いついたものです。 React Router Linkコンポーネントを包み込むコンポーネントで、componentDidMount（サーバーではなくクライアント上でのみ実行されます）で、稼働中であることを確認します（開発中にこれを実行する必要はありません）。そして、これがでない場合はサービスワーカー（このチェックは私のユースケースに固有のものです）。その後、手動で場所と照合し、非同期のgetComponent関数を呼び出します。

import React from 'react' 
import Link from 'react-router/lib/Link' 

class GatsbyLink extends React.Component { 
    componentDidMount() { 
    // Only enable prefetching of Link resources in production and for browsers that 
    // don't support service workers *cough* Safari/IE *cough*. 
    if (process.env.NODE_ENV === 'production' && !('serviceWorker' in navigator)) { 
     const routes = require('my-routes') 
     const { createMemoryHistory } = require('history') 
     const matchRoutes = require('react-router/lib/matchRoutes') 
     const getComponents = require('react-router/lib/getComponents') 

     const createLocation = createMemoryHistory().createLocation 

     if (typeof routes !== 'undefined') { 
     matchRoutes([routes], createLocation(this.props.to), (error, nextState) => { 
      getComponents(nextState,() => console.log('loaded bundle(s) for ' + this.props.to)) 
     }) 
     } 
    } 
    } 

    render() { 
    return <Link {...this.props} /> 
    } 
} 

module.exports = GatsbyLink