Reactjs Webpack v4创建小数据块（按路径）

这是我在React应用程序中使用的一些代码。我的路线是用它来写的，它允许我保持一种集中的方式，这样我就知道要去哪里，以便修改或添加一些

const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home
      },
      {
        path: "/child/:id",
        component: Child,
        routes: [
          {
            path: "/child/:id/grand-child",
            component: GrandChild
          }
        ]
      }
    ]
  }
];

然后，假设子组件是以动态方式导入的：

const Child = lazy(() => import('./Child'));

我希望生成的区块包括子区块、其导入/依赖项以及孙子区块及其导入/依赖项；但实际情况是，输出是一个很小的（1kb）文件，其中只包含该组件（子组件）的行

---

我怎样才能把所有与

/child/：id

路线有关的内容都做成网页块呢？

考虑到对于这样一个重要的功能缺乏解决方案（我已经到处搜索了3天了），我最终还是手动完成了

Webpack允许指定动态导入将生成的块的名称。如果您对功能中涉及的所有相关组件使用相同的名称（如果功能是您的分块方法），那么您可以执行以下操作：

/* ********************************** ACCOUNT ********************************** */
export const Account = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/Account'));
export const MyConsumption = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/MyConsumption/MyConsumption'));
export const MyAccount = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/MyAccount/MyAccount'));
export const Settings = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/Settings/Settings'));
export const Notifications = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/Notifications/Notifications'));

/* ********************************** OTHER PRODUCTS ********************************** */
export const Sectors = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/Sectors'));
export const SectorsList = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/SectorsList/SectorsList'));
export const SectorFile = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/SectorFile/SectorFile'));
export const SectorRiskReport = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/SectorRiskReport/SectorRiskReport'));
export const PressMail = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/PressMail/PressMail'));
export const ValoraInfo = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Valora/ValoraInfo'));
export const ValoraReport = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Valora/ValoraReport'));

结果将是这样的块（注意黄色块上面的2个块，上面代码的结果）：

这是值得分享的东西，也是创建有意义的块的一种方法。我的主要部分是更轻的方式以及供应商的方式，因此我们可以提供渐进式体验并缓存用户将反复使用的资源

---

我希望我能帮助别人。

我想补充一点，react router config是一个小型库，它所做的唯一一件事就是为提供的路由数组的每个条目返回一个父项和s，因此，一切都应该按照