Reactjs 将2个或多个动态导入合并到webpack的一个块中

我正在根据browserRouter中加载的路由对react Web包应用程序进行代码拆分。现在我想将2个或更多动态导入打包到一个块中。例如，我有一个路由

/a

，它呈现仪表板的详细信息，另一个路由

/a/{id}

，它显示单个项目的详细信息视图。因为，当我的用户导航到仪表板时，他们很可能也会打开某个项目的详细信息视图，所以我希望将两个动态导入的组件打包到同一块中。这可能吗

让详细信息：任意；
让aDashboard：任何；
const[IsLoadedDashboard，SetIsLoadedDashboard]=useState（false）；
const[IsLoadedDetails，SetIsLoadedDetails]=useState（false）；
返回(
{
导入（'../A/Dashboard'）。然后（（mod）=>{
aDashboard=mod.default；
SetLoadedDashboard（真）；
});
返回仪表板(
) : ;
}}
/>
{
导入（'../A/Details'）。然后（（mod）=>{
aDetails=mod.default；
setLoadedDetails（true）；
});
返回详细信息(
) : ;
}}
/>
);

创建代理模块，该模块包括两个您需要位于一个块中的模块：

import Dashboard from 'Dashboard';
import Details from 'Details';

export {Dashboard, Details};

现在让我们假设上面模块的名称为“Proxy”（仅举个例子），它与您的模块位于同一目录中。您可以动态加载它：

 <Route
    exact
    path="/A"
    render={(props) => {
        import('../A/Proxy').then((mod) => {
            aDashboard = mod.Dashboard;
            setLoadedADashboard(true);
        });
        return loadedADashboard ? (
            <aDashboard />
        ) : <div />;
    }}
 />
 <Route
    exact
    path="/A/{id}"
    render={(props) => {
        import('../A/Proxy').then((mod) => {
            aDetails = mod.Details;
            setLoadedADetails(true);
        });
        return loadedADetails ? (
            <aDetails />
        ) : <div />;
    }}
 />

{
导入（'../A/Proxy'）。然后（（mod）=>{
aDashboard=模块仪表板；
SetLoadedDashboard（真）；
});
返回仪表板(
) : ;
}}
/>
{
导入（'../A/Proxy'）。然后（（mod）=>{
aDetails=模块详细信息；
setLoadedDetails（true）；
});
返回详细信息(
) : ;
}}
/>

您可以尝试在动态导入中使用webpack magic注释。对于这两个动态导入，请使用相同的WebPackageChunkName以确保两个文件捆绑在同一块下

import(/* webpackChunkName: 'dashboard' */'../A/Dashboard').then((mod) => {
  aDashboard = mod.default;
  setLoadedADashboard(true);
});
import(/* webpackChunkName: 'dashboard' */'../A/Details').then((mod) => {
  aDetails = mod.default;
  setLoadedADetails(true);
});

---

注意：我们对两个导入使用相同的块名称。

非常感谢您的回复！这是我已经考虑过的，但现在的问题是我们的代码的组织方式，以这种方式构建我的导入将意味着一些重要的重构，所以我正在寻找一种不需要太多代码更改的方法。就像一个网页包插件或者我可以把它作为配置而不是代码添加的东西。