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

Question

我正在尝试将我的应用程序拆分为chunksusing dynamic imports. 据我所见，我只能dynamic import用于每个组件，但我想将单独的应用程序部分拆分为chunks：

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

因此，如果用户从产品部分访问任何路由，例如 /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} />

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