Juni Brosas Juni Brosas - 1 year ago 85
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 Source

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


The kyt-starter-universal repository has an example:

const importHome = (nextState, cb) => {
    .then(module => cb(null, module.default))
    .catch((e) => { throw e; });


const routes = (
  <Route path="/" component={App}>
    <IndexRoute getComponent={importHome} />

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:


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download