Juni Brosas Juni Brosas - 22 days ago 8
React JSX Question

Decoupling Modules in React

I want to decouple my application modules so that each modules can be developed individually. I use React, Redux and React Router and I think routing place a major role here. I also want to retain SPA (no page reload) feature of the application. Should I have different html files? Can I bundle my source JS files separately?

enter image description here

My thoughts are broad so I want to narrow it down to the best possible solutions.

With the current structure I have above, Im worried that my single source JS files will have a huge file size.

Answer

One possible approach to deal with large bundle files to use webpack for code splitting your application:

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

The kyt-starter-universal repository has an example:

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

With webpack 2, rather than importing the modules normally, System.import will let webpack know to create a separate chunk for that module and its dependencies. Webpack 1 also has code splitting using require.ensure

More reading:

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/