reactjs - 如何延迟加载 "import { SelectedComponent } from {Library}"？

Question

我正在使用带有 Vite 和 Ionic 的 React 18，并且我正在尝试延迟加载 IonDatetime 组件:

import { IonDatetime } from '@ionic/react';
const ControllerDatetime: React.FC<ControllerDatetimeProps> = ({
  control,
  label,
  name,
  clearErrors,
  disabled,
}: ControllerDatetimeProps) => {
  return (
    <Controller
      control={control}
      name={name}
      rules={{ required: true }}
      render={({
        field: { onChange, onBlur, value },
        fieldState: { invalid, isTouched },
      }) => (
        <IonDatetime>
          {label}
        </IonDatetime>
      )}
    />
  );
}

不过我不知道如何在这里使用延迟加载。

我试过了

const IonDatetime = React.lazy(() => import { IonDatetime } from '@ionic/react')

但这会导致语法错误。

我成功地使用延迟加载来获取自己组件的默认导出，但如何从第三方库延迟加载特定组件？

Answer 1

React.lazy currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don’t pull in unused components. (Legacy React code-splitting docs)

// IonDatetime.js
export { IonDatetime as default } from "@ionic/react";

const IonDatetime = React.lazy(() => import("IonDatetime.js"))