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

Question

我开始为我的项目使用 react-boilerplate，我试图弄清楚路由是如何在那里工作的。您能否在文档或应用程序中向我解释这个示例？

• 为什么getComponent()相对于简单的 react-router 路由定义功能这么大<Route path='somepath' component={SomeContainer} />？
• 我们为什么要调用injectReducersand 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 会查看并相应地将代码拆分为不同的文件。

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