webpack - 动态导入 Next.js 但仍然看到 bundle 中的模块

Question

我正在将组件设置为动态可调用:

索引.tsx

import dynamic from "next/dynamic";
import { PhoneNumberInputProps } from "./components/PhoneNumberInput";

const PhoneNumberInput = dynamic<PhoneNumberInputProps>(
  () => import("./components/PhoneNumberInput") as any
);

组件/PhoneNumberInput.tsx

...
import PhoneInput from "react-phone-number-input";
...

export type PhoneNumberInputProps = {...};

export const PhoneNumberInput = ({...}: PhoneNumberInputProps) => {
...
}

所以，react-phone-number-input 不应该是初始包的一部分，对吧？但是当我分析它时它仍然存在。为什么？

Answer 1

为了从包中删除文件 PhoneNumberInput.tsx，您需要将 index.ts 中的导入删除到 ./components/PhoneNumberInput.

对于 PhoneNumberInputProps，您可以将该类型移动到它自己的文件中，或者只需将类型更改为 Any 进行测试(如果 typescript 给您带来困难)。

const PhoneNumberInput = dynamic<Any>(
  () => import("./components/PhoneNumberInput")
);