Question

在网络服务器后面托管应用程序时，代码拆分不起作用

我的设置： 我在路径/management下有一个弹出的CRA，该CRA 使用Web服务器托管 因此，如果我去myfacnywebsite.com/management，就会得到我的react应用

由于我将应用托管在Web服务器后面，因此我根据https://create-react-app.dev/docs/deployment#building-for-relative-paths在package.json中设置了"homepage": "/management"

此外，由于我使用的是react-router-v4，因此我将baseName设置为/ management以使其在刷新https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string中起作用

现在，问题是当我在路由级别添加代码拆分时，在本地运行应用程序时一切正常

但是，当我在路径/ management下的Web服务器后面应用程序时。请求的捆绑包获取/ management / management的URL。我很困惑?

我的 index.ts 文件

中的

代码段

ReactDOM.render(
  <Provider store={store}>
    <ApolloProvider client={cqrsClient}>
      <ErrorBoundary name="app" ErrorComponent={DefaultError}>
        <Router  basename="/management">
          <App />
        </Router>
      </ErrorBoundary>
    </ApolloProvider>
  </Provider>,
  document.getElementById("root")
);

我的 package.json 中的CRA代码片段

{
  "name": "FancyApp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
  },
  "scripts": {
    ...
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    ...
  },
  "babel": {
    ...
  },
  "homepage": "/management"
}

Answer 1

这是一个很棒的视频教程，介绍了使用React Router和Suspense进行代码拆分和延迟加载的正确方法：https://youtu.be/j8NJc60H294

您可以使用此代码，但我强烈建议上面的视频。

import React, { Suspense } from 'react';
import lazy from 'react-lazy-named';

const LoremIpsum = lazy(()=>import('react-lorem-ipsum'));

const BoringContent = () => (
  <section>
    <h2>Terms and Conditions</h2>
    <LoremIpsum avgWordsPerSentence={12} p={10} />
    <Suspense fallback={<div>Lorem ipsum</div>}>
      <LoremIpsum avgWordsPerSentence={12} p={10} />
    </Suspense>
  </section>
);

代码拆分不适用于CRA + React Route v4 +代码拆分

1 个答案: