延迟加载页面组件与 ES6 导入

Question

我正在开发一个项目，我们在APP的路由级别使用延迟加载。

import { Suspense, lazy } from 'react';

const AppRoutes = lazy(() =>
  import(/* webpackChunkName: "App" */ './routes/RouteConfig.jsx')
);

export default function App() {
  return (
    <>
      <Suspense fallback={<Loading />}>
      <ThemeProvider theme={lightTheme}>
        <CssBaseline />
        <AppRoutes />
        <Toaster
          richColors
          visibleToasts={3}
          position='top-right'
          closeButton={false}
          gap={12}
          pauseWhenPageIsHidden={true}
          duration={1500}
          expand={false}
        />
      </ThemeProvider>
      </Suspense>
    </>
  );
}

我的问题是我们也应该在页面级别延迟加载吗？

例如：我正在构建一个营销，因为我将组件中的每个部分分开以将它们导入到 MarketingPage.jsx 中，我应该进行 ES6 导入还是延迟加载？

import { Suspense, lazy } from 'react';

const Cards = lazy(() => import('../../components/Cards'));
const Hero = lazy(() => import('./Hero'));
const InSightsHub = lazy(() => import('./InSightsHub'));
const InfoScreen = lazy(() => import('./InfoScreen'));
const InvestWithGenie = lazy(() => import('./InvestWithGenie'));
const Investment = lazy(() => import('./Investment'));
const Portfolio = lazy(() => import('./Portfolio'));

export default function MarketingPage() {
  return (
    <>
      <Suspense fallback={'Loading...'}>
        <Hero />
        <Investment />
        <InvestWithGenie />
        <InfoScreen />
        <Portfolio />
        <InSightsHub />
        <Cards />
      </Suspense>
    </>
  );
}

请解释我是否应该使用，如果不应该使用为什么我们不应该使用以及使用延迟加载的最佳实践在哪里。

Answer 1

让我们评估一下为什么我们首先需要使用延迟加载，以及当您将组件包装在

lazy(() => import('/SomeComponent'))

中时会发生什么？ 默认情况下，大多数捆绑程序至少创建两个 .js 文件：

• vendor.js

  - 具有来自

  node_modules

  的依赖项，如

  react

  、

  react-router

  等。对于小型应用程序，用户将加载的 90-95% 字节落在

  vendor

  捆绑包上。

• app.js

  /

  index.js

  - 这是您的所有应用程序代码。

每次你在代码中使用

lazy()

时，你就告诉 webpack/vite 将此文件的内容放入单独的 js 文件中。并且不要加载此文件，除非用户尝试渲染此组件。当它第一次发生时，应用程序将尝试使用组件加载此 js 文件，然后才会渲染它。这会导致更糟糕的用户体验。如果页面/组件非常重（例如 Facebook），将部分应用程序从主捆绑包中取出可能是有意义的，但对于较小的应用程序，这几乎总是不必要的。

所以，正确的做法是：

1. 默认不使用lazy。测量

   main

   捆绑包的加载时间。
2. 如果您认为它太重，请尝试使用

   lazy

   作为应用程序中最重且最少使用的部分/组件/页面。
3. 再次重复测量

   main

   捆绑包以及用户等待

   lazy

   组件加载所需的时间。