[SOLVED] webpack - splitting a single file into multiple chunks?

webpack - splitting a single file into multiple chunks?

I have a project that looks like this:

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

Here's what I'm seeing:

If I remove the useEffect, I get 20 KB (tree-shaking) of package in the entrypoint.
If I add the useEffect, I get "./fullConfig" in a separate chunk, as desired, but I get an additional 50 KB of package

What I want to see:

20KB of package in chunk 1 and 50KB of package in chunk 2

Does anyone know how to accomplish this?

I read the https://webpack.js.org/plugins/split-chunks-plugin/ documentation. There is nothing about splitting along tree shaking, i.e. one node_module becoming two chunks. So part of me is worried that this may not be possible.

EDIT: I found from here: https://github.com/rollup/rollup/issues/2512 , that rollup does not have this feature, but esbuild does have this feature. I can find no information about whether Webpack has this feature though.

EDIT 2: I found a GitHub issue on Webpack but it seems inconclusive.

Solution