如何使用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進行代碼分割？

回答

相關問題