时间戳

首页 > 解决方案 > 将 2 个或多个动态导入组合成一个块用于 webpack

reactjs - 将 2 个或多个动态导入组合成一个块用于 webpack

问题描述

我正在根据 browserRouter 中加载的路由拆分 react-webpack 应用程序的代码。现在我想将 2 个或更多动态导入打包成一个块。例如，我有一个/A渲染 A Dashboard 的路由和另一个/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>
);

标签： reactjswebpackcode-splitting

解决方案

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

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

推荐阅读