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

Question

我目前正在创建一个反应网页，使用 starlette 作为我的网络服务器框架，它连接我的数据库并提供 API。为了改进代码分离和不必要的文件加载，我将我的页面分成两个单独构建的反应页面。一个用于验证前的登录页面，一个用于验证完成且用户拥有有效令牌后的主页。这样做的问题是，两个响应网页都将 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, 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>
  );
}