Webpack puts lazy-loaded module into main chunk

[AlexanderSlesarenko]

I have two components.

One of them is imported directly:

import { directComp } from "./components";

another one is imported lazy:

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

lazyProxy.js:

import { lazyComp } from "./components";

export default lazyComp;

components/index.js:

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

When i bundle it, webpack puts both lazyComp and directComp into main chunk. Which is not what i expected. I wanted lazy-loaded component to be in a separate chunk.

If i change components/index.js:

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

Then webpack works as expected: directly imported directComp resides in main chunk. Lazy loaded lazyComp - in a separate chunk.

I would like to achieve the same result (directComp - in main, lazyComp - in a separate chunk) when all the code of these components is located inside one file, i.e.:

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

Here is a link to the sample repo:
https://github.com/AlexanderSlesarenko/sample

[alexander-akait]

You can setup this using https://webpack.js.org/plugins/split-chunks-plugin/

[AlexanderSlesarenko]

can you please give an example?