如何使用ReactQL进行代码分割？

开箱，ReactQL带有这样定义了几个“页”：如何使用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块中？

请注意，ReactQL支持SSR和React-Router据称does not。我在问什么可能？

来源

2017-04-06 mpen

查看this issue查看代码分割和SSR工作的示例。

我目前正在研究一个指导和帮助组件，它将更进一步，并提供一些样板以更常规的方式完成此操作。

这当然是可能的阵营路由器：见https://reacttraining.com/react-router/web/guides/code-splitting

将更新https://reactql.org，完成后在这里发布更新。

来源

2017-04-07 08:48:09

让我担心的部分是在该页的底部（https://reacttraining.com/react-router/web/guides/code-splitting/code-splitting-server-rendering），反应路由器的人说他们无法获得代码分裂在服务器上工作。你在GitHub问题中给出的例子很好，但'。/ test'是硬编码的，所以webpack可以解决它。如果你通过道具传递它，它会起作用吗？我想我会等你来更新入门套件。谢谢你的帮助！大图书馆。 – mpen

ReactQL以与客户端相同的方式通过Webpack构建服务器包，因此在两种环境中代码拆分都以相同方式进行填充。我猜RR客户正在尝试手动完成它（例如客户端异步，但在服务器上同步），这将很难协调。你仍然需要静态导入来调用任何'import（）'调用来进行代码分割，但这对于解决正确的模式应该不是一个大问题。我已将它添加到路线图 - > https://github.com/leebenson/reactql/issues/10 –

如何使用ReactQL进行代码分割？

回答

相关问题