Webpack v4 создает крошечные фрагменты (по маршруту)

Это часть кода, который я использую в своем приложении React. Мои маршруты написаны с использованием react-router-config, что позволяет мне сохранить централизованный способ, чтобы я всегда знал, куда идти, чтобы изменить или добавить что-то.

const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home
      },
      {
        path: "/child/:id",
        component: Child,
        routes: [
          {
            path: "/child/:id/grand-child",
            component: GrandChild
          }
        ]
      }
    ]
  }
];

Затем, допустим, компонент Child динамически импортируется:

const Child = lazy(() => import('./Child'));

Я ожидаю, что сгенерированный фрагмент включает в себя Child, его импорт/зависимости, а также GrandChild и его импорт/зависимости; но реальность такова, что вывод представляет собой крошечный (1 КБ) файл, который включает только строки этого компонента (дочернего).

Как я могу сделать фрагмент веб-пакета всем, что имеет значение для маршрута /child/:id?


webpack reactjs react-router webpack-splitchunks splitchunksplugin
person rmartrenado    schedule 17.12.2019    source источник
comment
Я хотел добавить, что react-router-config — это небольшая библиотека, и единственное, что она делает, — это возвращает родительские «Switch» и «Route» для каждой записи предоставленного массива маршрутов, поэтому все должно работать, как указано. в en.reactjs.org/docs/code-splitting.html   -  person rmartrenado    schedule 17.12.2019

Ответы (1)


arrow_upward
0
arrow_downward

Учитывая отсутствие решений для такой важной функции (я ищу везде уже 3 дня), я в конечном итоге сделал это вручную.

Webpack позволяет указать имя чанка, который будет сгенерирован при динамическом импорте. Если вы используете одно и то же имя для всех соответствующих компонентов, участвующих в функции (если функции — это ваш подход к фрагментированию), вы можете сделать что-то вроде этого:

/* ********************************** ACCOUNT ********************************** */
export const Account = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/Account'));
export const MyConsumption = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/MyConsumption/MyConsumption'));
export const MyAccount = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/MyAccount/MyAccount'));
export const Settings = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/Settings/Settings'));
export const Notifications = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "cuenta" */ './pages/Account/Notifications/Notifications'));

/* ********************************** OTHER PRODUCTS ********************************** */
export const Sectors = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/Sectors'));
export const SectorsList = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/SectorsList/SectorsList'));
export const SectorFile = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/SectorFile/SectorFile'));
export const SectorRiskReport = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Sectors/SectorRiskReport/SectorRiskReport'));
export const PressMail = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/PressMail/PressMail'));
export const ValoraInfo = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Valora/ValoraInfo'));
export const ValoraReport = lazy(() => import(/* webpackPrefetch: true, webpackChunkName: "otros-productos" */ './pages/OtherProducts/Valora/ValoraReport'));

И результатом будут такие фрагменты (обратите внимание на 2 фрагмента над желтым фрагментом, результат кода, который вы видите выше):

введите здесь описание изображения

Это то, чем стоит поделиться, и это способ создавать фрагменты, которые имеют смысл. Мой основной фрагмент намного легче, как и вендоровский, поэтому мы можем обеспечить прогрессивный опыт и кэшировать ресурсы, которые будут использоваться пользователем снова и снова.

Я надеюсь, что помогу кому-нибудь там.

person rmartrenado    schedule 17.12.2019