Разделение кода на основе маршрутов не найдено после сборки приложения только для более глубоких маршрутов - PullRequest
0 голосов
/ 05 ноября 2018

Я создаю приложение React с использованием create-реагировать на приложение, и теперь я борюсь с разделением кода в нем. Я использую реагирующую загрузку. В среде разработки все было хорошо, но при сборке некоторые чанки по более глубоким маршрутам (например, / test / 2 или / test-a / 42) не были загружены, поскольку чанки не были найдены (404).

Вот как я загружал свой компонент, используя реагирующую загрузку

.....

const test = Loadable({
  loader: () => import("../test/test"),
  loading: Loading
});
const testdetail = Loadable({
  loader: () => import("../test/testdetail"),
  loading: Loading
});
const testa = Loadable({
  loader: () => import("../test/testa"),
  loading: Loading
});
const testadetail = Loadable({
  loader: () => import("../test/testadetail"),
  loading: Loading
});

.....

Вот как я использовал эти компоненты в своих маршрутах

<Switch>
  <Route
    exact
    path="/test"
    component={test}
    />
   <Route
    path="/test/:id"
    component={testdetail}
    />
  <Route
    exact
    path="/test-a"
    component={testa}
    />
  <Route
    path="/test-a/:id"
    component={testadetail}
    />
</Switch>

Как я уже сказал, в режиме разработки все выглядело нормально, однако после создания приложения в рабочем режиме не были найдены блоки маршрутов / test /: id & / test-a /: id. Любой ответ действительно спасет мою жизнь, спасибо

1 Ответ

0 голосов
/ 06 ноября 2018

Код кажется нормальным. Вы пробовали другие библиотеки как " loadable-component "

. Вы также можете перейти на CRA-2.0 с новым

React.lazy

и

Захватывающий которые также используются для разделения кода и многих других вещей. Проверьте документы . , Если вы не используете SSR, попробуйте следующее.

...