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

【问题标题】：Code Splitting not working with CRA + React Route v4 + Code Splitting代码拆分不适用于 CRA + React Route v4 + 代码拆分
【发布时间】：2020-01-10 03:12:02
【问题描述】：

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

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

由于我在 WebServer 后面托管应用程序，因此我根据 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 下的网络服务器后面应用程序时。请求的捆绑包正在获取 /management/management 的 URL。我很困惑这是怎么回事？？？？

我的 index.ts 文件中的代码 sn-p

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 的代码 sn-p

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

【问题讨论】：

您必须将所有路由放入并为此设置回退
目前，我已经通过在 NGINX 中编写一个重写规则来解决这个问题，该规则用于托管我的反应 UI ``` location /management { rewrite ^/management/(.*)$ /$1 last ; } ``` 因此，当请求进入 /management/management/.. 上的惰性块时，首先 /management 被 WebServer 取消，该 WebServer 将请求路由到我在 NGINX 上的 react UI 和第二个 /management 被取消根据上面显示的规则，由 NGINX 托管我的 UI 从 URL

标签： reactjs webpack create-react-app react-router-dom code-splitting

【解决方案1】：

这是一个很棒的视频教程，介绍了使用 React a 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>
);

【讨论】：