如何让Webpack将同一文件内的懒加载组件打包为独立chunk

场景说明 #

我有两个组件，采用不同导入方式：

• 直接导入：

  import { directComp } from "./components";
  

• 懒加载导入：

  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");
};

问题现象 #

打包后发现 Webpack 将 lazyComp 和 directComp 都放入了主 chunk，不符合预期——我希望懒加载的 lazyComp 能被打包到独立 chunk 中。

对比可行方案 #

当修改 components/index.js 为以下结构时，Webpack 可正常实现代码分割：

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

此时直接导入的 directComp 留在主 chunk，懒加载的 lazyComp 被打包到独立 chunk。

需求 #

我希望在**两个组件代码都位于同一个文件（即初始的 components/index.js 结构）**的前提下，实现同样的效果：directComp 保留在主 chunk，lazyComp 打包到独立 chunk。

内容的提问来源于stack exchange，提问作者Slesarenko Alexander