reactjs - Webpack v4 创建小块（通过路由）

Question

这是我在 React 应用程序中使用的一些代码。我的路由是使用react-router-config编写的，这使我可以保持集中的方式，因此我总是知道去哪里以便修改或添加一些。

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

然后，假设 Child 组件是动态导入的：

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

我希望生成的块包括 Child、它的导入/依赖项和 GrandChild 及其导入/依赖项；但实际情况是，输出是一个很小的 ​​(1kb) 文件，其中仅包含该组件 (Child) 的行。

我怎样才能让 webpack 块对/child/:id路由很重要？

标签： reactjswebpackreact-routerwebpack-splitchunkssplitchunksplugin

Answer 1

鉴于缺乏针对如此重要功能的解决方案（我已经到处搜索了 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 个块，这是您在上面看到的代码的结果）：

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

我希望我能帮助那里的人。