reactjs - 通过动态导入代码拆分应用程序部分

Question

我正在尝试使用动态导入 将我的应用程序拆分为 block 。据我所知，我只能对每个组件使用动态导入，但我想将单独的应用程序部分拆分为 block :

• 产品部分(多个页面、商店、实用程序等)
• 用户部分(多个页面、商店、实用程序等)

因此，如果用户从产品部分访问任何路径，例如/product/:id，将加载 product.chunk.js。

我找不到这方面的任何例子，所以我不确定它是否可行。

Answer 1

我不确定 mobx-state-router 是否支持它，但您在这里真正想要的是嵌套路由。也许这会帮助您找到解决方案..

例如

主路由器

const Products = React.lazy(() => import('./products'));
const Users = React.lazy(() => import('./users'));
...
<Route path="/products" component={Products} />
<Route path="/users" component={Users} />

然后每个部分都有自己的内部路由器..

产品路由器(在 products.jsx 中)

import ProductList from "./product-list";
import Product from "./product";

const ProductsAdmin = React.lazy(() => import('./products-admin'));

<Route path="/products" component={ProductList} />
<Route path="/products/:id" component={Product} />
<Route path="/products/admin" component={ProductsAdmin} />

用户路由器(在 users.jsx 中)

import UserList from "./user-list";
import User from "./user";

<Route path="/users" component={UserList} />
<Route path="/users/:id" component={User} />

然后您可以决定延迟加载整个部分，或者通过延迟加载更深的路由来进一步拆分包。