react代码分割的三种实现方法

import React, { Suspense } from "react";

// 按需加载组件
const PerformanceReport = React.lazy(() => import("./pages/PerformanceReport"));

function App() {
  return (
    <div>
      <h1>云鉴性能平台</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <PerformanceReport />
      </Suspense>
    </div>
  );
}

export default App;

import React, { Suspense } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const PerformanceQuery = React.lazy(() => import("./pages/PerformanceQuery"));
const PerformanceReport = React.lazy(() => import("./pages/PerformanceReport"));

function AppRouter() {
  return (
    <Router>
      <Suspense fallback={<div>页面加载中...</div>}>
        <Routes>
          <Route path="/query" element={<PerformanceQuery />} />
          <Route path="/report" element={<PerformanceReport />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default AppRouter;

async function loadExcelExport() {
  const { exportToExcel } = await import("./utils/excelExport");
  exportToExcel();
}