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

Posted 2023-02-22

【中文标题】代码拆分不适用于 CRA + React Route v4 + 代码拆分

【英文标题】：Code Splitting not working with CRA + React Route v4 + Code Splitting

【发布时间】：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

【参考方案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>
);