Webpackコード分割を使用して、チャンクとHTMLレイアウトをロードする方法は？

Question

私は必要に応じてロードされるチャンクを構築するためにwebpackを使用します（コード分割）。各チャンクはReactコンポーネントをDOM要素（divs）にレンダリングしています。これらのdivを作成するには、HTMLが必要です。対応するHTMLをいつ、どのように読み込む必要がありますか？また、要求に応じてチャンクをどのようにロードする必要がありますか？

jQueryのload関数を使用して、コンテナdivsのファイルからHTMLを挿入します。さらに、私は<script>タグを入れて、どのチャンクをロードすべきかを教えてもらえますが、私はアプリケーションコードの残りの部分と比べて、やや上品ではないと思います。

これを行うには脆弱な方法はありますか？ JSXファイルはオンデマンドでロードされます

<Route name="app" component={require('./app.jsx')}> 
    <Route path="/" name="home" component={require('./homepage-container.jsx')}/> 
    <Route path="/otherpath" name="other" component={require('./other.jsx')}/> 
    ... add as many routes as wanted 
</Route> 

）、およびプレーンHTMLは必要ありません。

Answer 1

それは私がreact-routerを介して行うことができます達成するために何を望むか、単に私が知らなかったことが判明します 私は反応するデザインを使用しているので、すべての部分がコンポーネントです。 この例では、#/otherpathへのリンクを有効にすれば、 otherコンポーネントを上位レベルのコンポーネント（ルートappという名前）の子としてロードすることができます。

Answer 2

ダイナミックルートロードにはrequire.ensureを使用する必要があります。さらに、Webpack 2 + Treeを使用するようにプロジェクトを設定した場合は、System.importを使用できます。あなたはこのブログの記事で、全体のガイドを得ることができます

import App from 'containers/App'; 
 
function errorLoading(err) { 
 
    console.error('Dynamic page loading failed', err); 
 
} 
 
function loadRoute(cb) { 
 
    return (module) => cb(null, module.default); 
 
} 
 
export default { 
 
    component: App, 
 
    childRoutes: [ 
 
    { 
 
     path: '/', 
 
     getComponent(location, cb) { 
 
     System.import('pages/Home') 
 
      .then(loadRoute(cb)) 
 
      .catch(errorLoading); 
 
     } 
 
    }, 
 
    { 
 
     path: 'blog', 
 
     getComponent(location, cb) { 
 
     System.import('pages/Blog') 
 
      .then(loadRoute(cb)) 
 
      .catch(errorLoading); 
 
     } 
 
    } 
 
    ] 
 
};

：Automatic Code Splitting for React Router