如何通过Webpack将单个依赖包拆分为多个代码块？

项目代码 #

baseConfig.ts #

import { a } from "package"
export baseConfig = config(a)

fullConfig.ts #

import { a, b, c } from "package"
export fullConfig = config(a)

_app.tsx #

import { baseConfig } from "./baseConfig"

const App = ({ Component, pageProps }: AppProps) => {
  const [config, setConfig] = useState(baseConfig)
  useEffect(() => {
    let isMounted = true
    import("./fullConfig")
      .then(({ fullConfig }) => isMounted && setConfig(fullConfig))
      .catch(captureException)
    return () => { isMounted = false }
  }, [])

  return (
    <MyProvider config={config}>
      <Component {...pageProps} />
    </MyProvider>
  )
}

当前现象 #

• 移除useEffect时，入口文件包含经过tree-shaking处理的20KB package 代码
• 添加useEffect后，fullConfig 被拆分为单独代码块，但额外引入了50KB的package代码

期望效果 #

• 代码块1（入口）包含20KB的package代码
• 代码块2（按需加载的fullConfig）包含50KB的package代码（仅包含baseConfig未用到的b、c相关部分）

疑问与补充 #

我翻遍了Webpack的split-chunks-plugin文档，没找到能基于tree-shaking把单个node_modules包拆成多个代码块的相关说明，担心这个需求根本实现不了。

补充信息：我知道Rollup不支持这个特性，但esbuild支持，不过没找到Webpack是否支持的明确结论；还找到了一个Webpack的GitHub Issue，但里面的结论模棱两可。

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