使用webpack代码拆分,如何加载块和HTML布局？

Question

我使用webpack来构建块,按需加载(代码分割); 每个块都将React组件呈现为DOM元素(div).我需要HTML来创建这些div:我应该如何以及何时加载相应的HTML？我应该如何按需加载块？

我使用jQuery的load函数从容器中的文件插入HTML divs.另外我放了一个<script>标签来告诉我应该加载哪个块但是我发现它与我的其他应用程序代码相比都很笨拙而且不优雅.

有一种不那么脆弱的方法吗？

Answer 1

事实证明，我想要实现的目标可以通过react-router来完成，只是我不知道;)

<Route name="app" component={require('./app.jsx')}>
    <Route path="/" name="home" component={require('./homepage-container.jsx')}/>
    <Route path="/otherpath" name="other" component={require('./other.jsx')}/>
    ... add as many routes as wanted
</Route>

jsx 文件按需加载，并且不需要纯 HTML，因为我使用的是 React，设计是每个部分都是一个组件。在此示例中，激活一个链接就足够了，#/otherpath以便将other组件作为上层组件的子组件加载（名为 的路由app）。