反应解耦模块

Question

我想要解耦我的应用程序模块，以便每个模块可以单独开发。我使用React，Redux和React路由器，我认为路由位置是这里的一个主要角色。我还想保留应用程序的SPA (无页面重新加载)功能。我应该有不同的html文件吗？我可以单独捆绑我的源JS文件吗？

​

​

我的想法是广泛的，所以我想缩小到最好的解决方案。

使用上面的当前结构，我担心我的单个源JS文件将有一个巨大的文件大小。

Answer 1

处理大型包文件的一种可能方法是将webpack用于码分裂应用程序：

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

kyt-启动器-通用存储库有一个示例：

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/

Answer 2

非常同意@DTing，使用webpack是你在这里的最佳选择。Webpack包括一个优化器，它了解如何将n个模块拆分成m个包。它在主包旁边为每个块生成单独的js文件，并在调用require时加载它们。

很少有更多的资源能帮助我理解这里的基本面。

( A) automatic-code-splitting-for-react-router-w-es6-imports

( B) Webpack语言中建立代码分裂与反应路由器的探讨

( C)关于为什么Vector.im web应用程序的JS包太大的原因，以及如何通过代码分割和应用程序结构的改变来改进JS包。一个改进包大小的方法的好例子

( D) 从webpack开始-2