将2个或多个动态导入组合到一个Webpack块中

问题描述

我正在根据在browserRouter中加载的路由来拆分react-webpack应用程序的代码。现在，我想将2个或多个动态导入打包到一个块中。例如，我有一条路线/A呈现了A仪表板，而另外一条/A/{id}则显示了单个项目的详细信息视图。由于当我的用户导航到仪表板时，他们很有可能还会打开某些项目的详细信息视图，因此我想将两个动态导入的组件打包在同一块中。这可能吗？

let aDetails: any;
let aDashboard: any;


const [isLoadedADashboard,setIsLoadedADashboard] = useState<boolean>(false);
const [isLoadedADetails,setIsLoadedADetails] = useState<boolean>(false);


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

解决方法

创建代理模块，其中包括您需要放在一个块中的两个模块：

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

export {Dashboard,Details};

现在，假设上述模块的名称为“代理”（仅作为示例），它与模块位于同一目录中。您可以动态加载它：

 <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 />;
    }}
 />

,

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

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

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