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 知道为该模块及其依赖项创建一个单独的块。 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/