0

我对反应中的代码拆分有疑问。假设您有一些名为 page1、page2 等的组件，并且还有一个 pages 文件，该文件使用React.lazy导出页面组件，并且您将 app 文件作为呈现这些页面的根组件。

页面文件：

import React from "react";

const Page1 = React.lazy(() => import("./page1"));
const Page2 = React.lazy(() => import("./page2"));
const Page3 = React.lazy(() => import("./page3"));

const pages = [{
    component: Page1,
}, {
    component: Page2,
}, {
    component: Page3,
}];

export default pages;

应用程序文件：

import React, { Suspense } from "react";

import pages from "./pages";

const App: React.FC = () => (
    <div>
      <Suspense fallback={<div>Loading</div>}>
            {pages.map((c) => <c.component />)}
      </Suspense>
    </div>
);

export default App;

当我在 react 中尝试这种设置时没有问题，并且 React 成功呈现页面并为所有页面创建多个块，但我不确定这种方法。我在代码拆分方面做得对吗？

4

0 回答 0