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

Question

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

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

可能有一种更优雅的方式来达到我想要的点，所以请随意起诉不同的方法。如果需要任何进一步的解释或代码，请告诉我，我可以将其添加到这篇文章中。

Answer 1

您可能需要执行代码拆分。阅读此处了解更多信息。

对应用进行

代码拆分可以帮助你"延迟加载"用户当前需要的内容，这可以显著提高应用的性能。虽然您没有减少应用中的代码总量，但您避免了加载用户可能永远不需要的代码，并减少了初始加载期间所需的代码量。

我假设你用了react-router-dom，所以这里有一个简单的实现：

import React, { Suspense } from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
const HomePage = React.lazy(() => import('./HomePage'));
const LoginPage = React.lazy(() => import('./LoginPage'));
function MyApp() {
const [auth, setAuth] = React.useState({
isLoading: true,
isAuthenticated: false,
data: null,
})
React.useEffect(() => {
const checkAuth = () => {
// call setAuth here
}
checkAuth()
}, [])
const MyRoute = ({ component: Component, authorized: false, ...rest }) => (
<Route
{...rest}
render={props => {
if (auth.isLoading) return null
if (authorized) { // Home page access
return auth.isAuthenticated
? <Component {...prop} />
: <Redirect to="/login" />
} else { // Login page access
return !auth.isAuthenticated
? <Component {...prop} />
: <Redirect to="/" />
}
}}
/>
)
return (
<BrowserRouter>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<MyRoute path="/login" component={LoginPage} authorized={false} />
<MyRoute path="/" component={HomePage} authorized={true} />
</Switch>
</Suspense>
</BrowserRouter>
);
}