即使使用延迟加载，所有组件也会立即加载

Question

我正在尝试延迟加载一些应该在登录后加载的页面。但是我可以在开发者工具中看到页面仍然与主包一起加载。

在添加延迟加载选项之前，我可以看到最小化的包大小为 874 KB。加上懒加载选项后，大小还是一样。 这是代码：

import { LandingPage, ErrorPage } from "./pages";
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";
import RouteLayout from "./layout/RouteLayout";
import { lazy, Suspense } from "react";

//Lazy loading components
const RestaurantPage = lazy(() => import("./pages/RestaurantPage"));
const CartPage = lazy(() => import("./pages/CartPage"));
const ContactPage = lazy(() => import("./pages/ContactPage"));
const AccountDetails = lazy(() => import("./pages/AccountDetails"));

function App() {
  //Routing elements
  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<RouteLayout />} errorElement={<ErrorPage />}>
        <Route index element={<LandingPage />} />
        <Route
          path="/order"
          element={
            <Suspense fallback={<h1>Loading...</h1>}>
              <RestaurantPage />
            </Suspense>
          }
        />
        <Route
          path="/cart"
          element={
            <Suspense fallback={<h1>Loading...</h1>}>
              <CartPage />
            </Suspense>
          }
        />
        <Route
          path="/contact"
          element={
            <Suspense fallback={<h1>Loading...</h1>}>
              <ContactPage />
            </Suspense>
          }
        />
        <Route
          path="/myAccount"
          element={
            <Suspense fallback={<h1>Loading...</h1>}>
              <AccountDetails />
            </Suspense>
          }
        />
      </Route>
    )
  );

  return (
    <ChakraProvider>
      <RouterProvider router={router} />
    </ChakraProvider>
  );
}

export default App;

我应该添加任何其他内存优化以使其工作吗？