开箱即用,ReactQL带有几个定义如下的“页面”:
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
和 Page
只是在同一文件中定义的组件。假设我不想加载所有代码,直到您导航到该页面,我如何“代码分割”并将每个页面移动到单独的 webpack block 中?
请注意,ReactQL 据称支持 SSR 和 React-Router does not 。我问的可以吗?
最佳答案
参见this issue有关代码分割和 SSR 工作的示例。
我目前正在开发一个指南和一个帮助组件,该组件将更进一步,并提供一些样板文件以更常规的方式执行此操作。
使用 React Router 当然可以:参见 https://reacttraining.com/react-router/web/guides/code-splitting
即将更新https://reactql.org完成后在此处发布更新。
关于webpack - 如何使用 ReactQL 进行代码分割?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43262259/