在React中去耦模塊

Question

我想分離我的應用程序模塊，以便可以單獨開發每個模塊。我使用React，Redux和React Router，我認爲路由在這裏扮演重要角色。我也想保留應用程序的SPA（無頁面重新加載）功能。我應該有不同的HTML文件嗎？我可以將我的源JS文件分開捆綁嗎？

我的想法是廣泛的，所以我想將它縮小到最佳的解決方案。

由於目前的結構，我有上面，我擔心我的單個源JS文件將有一個巨大的文件大小。

Answer 1

一種可能的方法來處理大捆文件中使用的WebPack爲code splitting您的應用程序：

https://gist.github.com/sokra/27b24881210b56bbaff7#code-splitting-with-es6

的kyt-starter-universal庫有一個例子：

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

用的WebPack 2，而不是正常導入模塊，System.import將讓webpack知道爲該模塊及其依賴關係創建單獨的塊。 1的WebPack也有使用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/

Answer 2

非常多的認同@DTing，使用的WebPack是你最好的選擇這裏。 Webpack包含一個優化器，它可以理解如何將n個模塊拆分爲m個捆綁包。它會爲主包中的每個塊生成單獨的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

C）On why the JS bundle for the Vector.im web app is too big, and ways it could potentially be improved using code splitting and app structure changes. A good example of ways to improve bundle sizes

d）getting-started-with-webpack-2