異なるサーバー側の状態に基づいてReactコンポーネントを非同期的にロードするにはどうすればよいですか？

Question

異なるユーザータイプに基づいてReactコンポーネントを非同期にロードできるようにしたいと思います。たとえば、ユーザーAがアプリをナビゲートすると、コンポーネントのセットがasync経由でロードされます。ユーザーBが受け取ったアプリを使用すると、別のコンポーネントのセットもasync経由でロードされます。

現時点では、私はReact RouterとReduxを使用しています。私はまた、このようなどの負荷の非同期コンポーネントのチャンクを作成するためのWebPACKを使用します。

<Route 
    path="/" 
    getComponent={(location, callback) => { 
    require.ensure([], (require) => { 
     callback(null, require('./app/App.jsx').default); 
    }, 'App'); 
    }} 
> 

をしかし、私はコンポーネントを動的にロードするために、これを拡大しようとすると、それは動作しません。私は

const routes = components.map((component) => { 

    if (component.indexRoute) { 
    return (
     <IndexRoute 
     getComponent={(location, callback) => { 
      require.ensure([], (require) => { 
      callback(null, require(component.src).default); 
      }, component.name); 
     }} 
     key={component.id} 
     /> 
    ); 
    } 

    return (
    <Route 
     path={component.path} 
     getComponent={(location, callback) => { 
     require.ensure([], (require) => { 
      callback(null, require(component.src).default); 
     }, component.name); 
     }} 
     key={component.id} 
    /> 
); 
}); 

...私は、これらのコンポーネントのそれぞれのルートを作成するためにマップを使用して...

{ 
    components: [ 
    { 
     id: 0, 
     name: 'Dashboard', 
     src: './dashboard/Dashboard.jsx', 
     indexRoute: true, 
     path: '/', 
    }, 
    { 
     id: 1, 
     name: 'Quote', 
     src: './quote/Quote.jsx', 
     indexRoute: false, 
     path: '/quote', 
    }, 
    ], 
} 

を私はロードしたいすべてのコンポーネントが含まれているオブジェクトの配列を作成しました

：私は...メインルートに

<Route 
    path="/" 
    getComponent={(location, callback) => { 
    require.ensure([], (require) => { 
     callback(null, require('./app/App.jsx').default); 
    }, 'App'); 
    }} 
> 
    {routes} 
</Route> 

を自分の作成したルートを挿入したときに、私は次のエラーを取得します3210

と警告：私はWebPACKのはそれがビルド時にコンパイルする必要がありますチャンク何を知っている必要があるためであると推測

require function is used in a way in which dependencies cannot be statically extracted 

？これは問題なのですか？それとももっと良い解決策ですか？後の段階でこの出くわす誰のための

おかげ

Answer 1

は、私は私のアプリはおそらく読み込むことができるすべての非同期コンポーネントを持つオブジェクトを作成することによってこの問題を回避するために管理しました。あなたはすべてのコンポーネントの別のリストを維持するために持っているように、各コンポーネントは、ルート定義は、それが、このようなように定義されたrequire.ensure機能だ...

このようにそれをやって

const asyncComponents = [ 
    { 
    id: 0, 
    name: 'Dashboard', 
    require: (location, callback) => { 
     require.ensure([], (require) => { 
     callback(null, require('./dashboard/Dashboard.jsx').default); 
     }, 'Dashboard'); 
    }, 
    }, 
]; 

export default asyncComponents; 

は、必然的にいくつかの点でスケーリングの問題に直面するだろうしています。それは今のところ働く。