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

Posted 2023-03-10

【中文标题】如何使用 ReactQL 进行代码拆分？

【英文标题】：How to do code splitting with ReactQL?

【发布时间】：2017-09-01 21:38:49

【问题描述】：

开箱即用，ReactQL 带有几个定义如下的“页面”：

export default () => (
  <div>
    <Helmet
      title="ReactQL application"
      meta=[
        name: 'description',
        content: 'ReactQL starter kit app',
      ] />
    <div className=css.hello>
      <img src=logo  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 支持 s-s-r 和 React-Router，据说是 does not。我问的可能吗？

【参考方案1】：

请参阅this issue，了解工作中的代码拆分和 s-s-r 示例。

我目前正在开发一个指南和一个帮助组件，它们会更进一步，并提供一些样板来以更常规的方式执行此操作。

使用 React 路由器当然可以：请参阅 https://reacttraining.com/react-router/web/guides/code-splitting

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

【讨论】：

让我担心的部分是bottom of that page，react-router 人员说他们无法在服务器上进行代码拆分。您在 GitHub 问题中给出的示例很好，但是 ./test 是硬编码的，因此 webpack 可以解决它。如果你通过道具传递它会起作用吗？我想我会等你更新入门工具包。谢谢你的帮助！很棒的图书馆。

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