Question

我正在尝试使用chunks将应用程序拆分为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} />

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

通过动态导入对应用程序部分进行代码拆分

1 个答案: