各モジュールを個別に開発できるようにアプリケーション・モジュールをデカップリングしたいと考えています。私はReact、Redux、React Routerを使用しています。ここでルーティング場所が重要な役割を果たしていると思います。私はまた、アプリケーションのSPA（ページリロードなし）機能を保持したい。別のhtmlファイルを用意する必要がありますか？ソースJSファイルを個別にバンドルすることはできますか？デカップリング・モジュールの反応
私の考えは、私は可能な限り最高のソリューションとそれを絞り込むたい広範です。
上記の私の構造では、私の単一のソースJSファイルのファイルサイズが大きくなることを心配しています。 code splittingあなたのアプリケーションのためのWebPACKを使用する大規模なバンドルファイルを扱うための
一つの可能なアプローチ：
https://gist.github.com/sokra/27b24881210b56bbaff7#code-splitting-with-es6
kyt-starter-universalリポジトリは例があります：WebPACKの2で
const importHome = (nextState, cb) => {
System.import('../components/Home')
.then(module => cb(null, module.default))
.catch((e) => { throw e; });
};
...
const routes = (
<Route path="/" component={App}>
<IndexRoute getComponent={importHome} />
...
</Route>
);
を、というより普通にモジュールをインポートすると、System.importはwebpackにそのモジュールとその依存関係のための別のチャンクを作成させることを知らせます。 WebPACKの1もrequire.ensure
もっと読書使用してコードを分割していますと
http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/
https://medium.com/@puppybits/webpack-code-splitting-by-routes-92f96cf733f2#.v1mxmc3ty
http://jonathancreamer.com/advanced-webpack-part-2-code-splitting/
http://blog.netgusto.com/asynchronous-reactjs-component-loading-with-webpack/
非常にWebPACKのを使用すると、ここにあなたの最善の策であることを@DTing同意するものとします。 Webpackには、n個のモジュールをmバンドルに分割する方法を理解するオプティマイザが含まれています。 mainバンドルの横にある各チャンクに対して別々のjsファイルを生成し、requireを呼び出すとそれらをロードします。ここで基礎をunderstadingために私のために役立ちました
少数のより多くのリソース..
A）automatic-code-splitting-for-react-router-w-es6-imports
B）Discussions on setting up code splitting in Webpack and React Router