Webpack 将延迟加载的模块放入主块中

Question

我有两个组件。

其中一个是直接导入的：

import { directComp } from "./components";

另外一个是懒惰导入的：

const lazyComp = import("./lazyProxy");

lazyProxy.js：

import { lazyComp } from "./components";

export default lazyComp;

组件/index.js：

export const lazyComp = () => {
  console.log("check lazyComp");
};
export const directComp = () => {
  console.log("check directComp");
};

当我打包它时，webpack 将lazyComp 和 directComp 都放入主块中。这不是我所期望的。我希望延迟加载的组件位于单独的块中。

如果我更改组件/index.js：

export { default as directComp } from "./directComp";
export { default as lazyComp } from "./lazyComp";

然后 webpack 按预期工作：直接导入的 directComp 驻留在 main chunk 中。延迟加载的lazyComp - 在单独的块中。

当这些组件的所有代码都位于一个文件内时，我希望获得相同的结果（directComp - 在 main 中，lazyComp - 在单独的块中），即：

export const lazyComp = () => {
  console.log("check lazyComp");
};
export const directComp = () => {
  console.log("check directComp");
};

Answer 1

有类似的问题，有人知道这是一个 webpack bug 还是我们做错了什么？