仅为更深层次的路由构建应用程序后，找不到基于路由的代码拆分块

Question

我正在使用 create-react-app 构建一个 React 应用程序，现在我正在努力处理其中的代码拆分。我正在使用反应加载。在开发环境中一切都很好，但是当它在一些更深的路径上构建一些块时（例如 /test/2 或 /test-a/42）没有加载，因为找不到块（404）。

这就是我使用 react-loadable 加载组件的方式

.....

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 块。任何答案都会真正挽救我的生命，谢谢

Answer 1

代码似乎没问题。您是否尝试过其他库，例如“loadable-component”

。您还可以使用新

升级到 CRA-2.0

React.lazy

和

Suspense which are also used for code splitting and many other stuffs. Check the docs. . If you are not using SSR then you can try these.

仅为更深层次的路由构建应用程序后，找不到基于路由的代码拆分块

Route-based code splitting chunks are not found after building the app only for deeper routes

javascript

reactjs

code-splitting

create-react-app

react-loadable