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

Question

我正在尝试使用 dynamic imports 将我的应用程序拆分为 chunks。据我所知，我只能对每个组件使用 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} />

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

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

Code splitting application sections via dynamic imports

dynamic-import

reactjs

webpack

code-splitting