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

Question

我开始在我的项目中使用 react-boilerplate，并试图弄清楚路由是如何在那里工作的。你能解释一下这个example in docs 或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 用于代码拆分。代码是说“当这条路线被调用时，加载这些减速器和传奇”。 Webpack 会查看并相应地将代码拆分为不同的文件。

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