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

Question

我使用 webpack 构建 block ，按需加载(代码拆分)；每个 block 都将 React 组件渲染成 DOM 元素 (divs)。我需要 HTML 来创建这些 div:我应该如何以及何时加载相应的 HTML？我应该如何按需加载 block ？

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

有没有更简单的方法来做到这一点？

Answer 1

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

方法如下:

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);
      }
    }
  ]
};

您可以在这篇博文中获得完整指南:Automatic Code Splitting for React Router