react-boilerplate 中的代码拆分和异步代码加载

Question

我开始在我的项目中使用 react-boilerplate，我试图弄清楚路由在那里是如何工作的。你能解释一下这个 example in docs or example in app 吗？

为什么 getComponent() 函数相对于简单的 react-router 路由定义 <Route path='somepath' component={SomeContainer} /> 如此庞大？
为什么要调用injectReducers和injectSagas？

谢谢！

path: '/posts/:slug',
name: 'post',
getComponent(nextState, cb) {
 const importModules = Promise.all([
   import('containers/Post/reducer'),
   import('containers/Post/sagas'),
   import('containers/Post'),
 ]);

 const renderRoute = loadModule(cb);

 importModules.then(([reducer, sagas, component]) => {
   injectReducer('post', reducer.default);
   injectSagas(sagas.default);
   renderRoute(component);
 });

 importModules.catch(errorLoading);
},

Answer 1

injectReducer 和 injectSagas 用于代码拆分。代码是 "when this route is called, load these reducers and sagas"。 Webpack 会查看并相应地将代码拆分到不同的文件中。

如果它是一个小应用程序则没有必要，但如果它是一个大应用程序，代码拆分可能有助于减少初始加载时间。

react-boilerplate 中的代码拆分和异步代码加载

Code-splitting and async code loading in react-boilerplate

reactjs

react-router

react-router-redux

react-boilerplate