Question

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

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

是否有一种不那么脆弱的方法呢？

Answer 1

您应该使用require.ensure进行动态路由加载。更好的是，如果您将项目设置为使用Webpack 2 + Tree摇动，则可以使用System.import。

以下是：

＆＃13;

import App from 'containers/App';
function errorLoading(err) {
  console.error('Dynamic page loading failed', err);
}
function loadRoute(cb) {
  return (module) => cb(null, module.default);
}
export default {
  component: App,
  childRoutes: [
    {
      path: '/',
      getComponent(location, cb) {
        System.import('pages/Home')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
    {
      path: 'blog',
      getComponent(location, cb) {
        System.import('pages/Blog')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    }
  ]
};

＆＃13;

您可以在此博客文章中获取整个指南：Automatic Code Splitting for React Router

Answer 2

事实证明，我想要实现的目标可以通过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 正如我使用的反应，设计是每个部分都是一个组件。在此示例中，只需激活指向#/otherpath的链接即可获取要加载的other组件作为上层组件的子级（称为app的路由）。

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

2 个答案: