从两个不同的静态构建目录提供服务React构建文件

Question

我目前正在使用starlette作为连接数据库并提供API的Web服务器框架，以创建一个反应网页。为了改善代码分离和不必要的文件加载，我将页面分为两个单独构建的react页面。一个用于验证之前的登录页面，一个用于完成验证且用户具有有效令牌的主页。问题在于，两个响应网页都将GET请求发送给以下示例：/static/js/2.91da4595.chunk.js。

我想知道我是否可以更改在查找静态文件时react将请求发送到的位置。因此，例如，我的登录页面将改为/otherstatic/js/2.91da4595.chunk.js。

可能会有一种更优雅的方法来达到我想要的目的，因此可以随意提出另一种方法。让我知道是否需要任何进一步的解释或代码，我可以将其添加到这篇文章中。

Answer 1

您可能需要进行代码拆分。阅读here了解更多信息。

对应用程序进行代码拆分可以帮助您“延迟加载”用户当前所需的内容，从而可以显着提高应用程序的性能。尽管您并未减少应用程序中的代码总数，但避免了加载用户可能永远不需要的代码，并减少了初始加载过程中所需的代码量。

我假设您使用了react-router-dom，所以这是一个简单的实现：

import React, { Suspense } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const HomePage = React.lazy(() => import('./HomePage'));
const LoginPage = React.lazy(() => import('./LoginPage'));

function MyApp() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/login" component={LoginPage} />
          <Route path="/" component={HomePage} />
        </Switch>
      </Suspense>
    </BrowserRouter>
  );
}