React 구성 요소를 다른 서버 측 상태에 따라 비동기 적으로로드하는 방법은 무엇입니까?

Question

다른 사용자 유형에 따라 React 구성 요소를 비동기 적으로로드 할 수 있어야합니다. 예를 들어 사용자 A가 앱을 탐색 할 때 구성 요소 세트가 async를 통해로드됩니다. 그런 다음 사용자 B가받은 응용 프로그램을 사용할 때 비동기를 통해로드 된 다른 구성 요소 집합도 수신됩니다.

현재 React Router와 Redux를 사용하고 있습니다. 나는 또한이 같은되는 부하 비동기 구성 요소의 덩어리를 만들 웹팩을 사용

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

을하지만 동적으로 구성 요소를로드하는이 확장 할 때 작동하지 않습니다. 내가로드 할 모든 구성 요소가 포함되어 객체의 배열 ...

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

그때 이러한 구성 요소 각각에 대한 경로를 만들 맵을 사용

을 ... 만든

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} 
    /> 
); 
}); 

: 나는 ... 주요 통로로

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

을 내 생성 경로를 삽입 할 때 나는 다음과 같은 오류가 발생합니다3210

경고 :

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

나는 웹팩 그것을 빌드시 컴파일하는 무슨 청크 알 필요가 있기 때문입니다 가정? 이것이 문제이며, 이것의 방법이 있습니까? 아니면 더 나은 솔루션일까요?

감사 이후 단계에서이 건너 오는 사람들을위한

Answer 1

, 나는 내 응용 프로그램이 가능로드 할 수있는 모든 비동기 구성 요소와 객체를 생성하여이 문제를 해결할 수 있었다. 각 구성 요소 경로 정의는 모든 구성 요소의 별도의 목록을 유지하기 위해 가지고

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

export default asyncComponents; 

는 몇 가지 점에서 확장 문제를 필연적으로 직면하게 될 것이다 이런 식으로 이렇게 ... 그것은 같은 같이 정의 require.ensure 기능입니다 있습니다. 그것은 지금 비록 작동합니다.