如何使用ReactQL进行代码拆分?

时间:2017-04-06 17:42:47

标签: webpack react-router-v4 reactql

开箱即用,ReactQL附带一对"页面"定义如下:

Variable=$()

但是,export default () => ( <div> <Helmet title="ReactQL application" meta={[{ name: 'description', content: 'ReactQL starter kit app', }]} /> <div className={css.hello}> <img src={logo} alt="ReactQL" className={css.logo} /> </div> <hr /> <GraphQLMessage /> <hr /> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/page/about">About</Link></li> <li><Link to="/page/contact">Contact</Link></li> </ul> <hr /> <Route exact path="/" component={Home} /> <Route path="/page/:name" component={Page} /> <hr /> <p>Runtime info:</p> <Stats /> <hr /> <p>Stylesheet examples:</p> <Styles /> </div> ); Home只是在同一文件中定义的组件。假设我不想加载所有代码,直到您导航到该页面,我如何&#34;代码拆分&#34;并将每个页面移动到一个单独的webpack块中?

请注意,ReactQL支持SSR和React-Router does not。我可以问的是什么?

1 个答案:

答案 0 :(得分:2)

有关代码分割和SSR工作的示例,请参阅this issue

我目前正在制作一个指南和辅助组件,它将更进一步,并提供一些样板来以更常规的方式执行此操作。

使用React Router肯定有可能:见https://reacttraining.com/react-router/web/guides/code-splitting

完成后会更新https://reactql.org并在此处发布更新。