Разделение приложений по разделам кода с помощью динамического импорта

Question

Я пытаюсь разделить свое приложение на chunks, используя dynamic imports.Насколько я видел, я могу использовать только dynamic import для каждого компонента, но я бы хотел разделить отдельные разделы приложения на chunks:

• Раздел продукта (несколькостраницы, магазины, утилиты и т. д.)
• Пользовательский раздел (несколько страниц, магазины, утилиты и т./: 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} />

После этого вы можете решить загружать целые секции или дополнительно разбивать пакеты, а также загружать более глубокие маршруты.