I am trying to reduce the total size of files imported during launch by making sure the independent chunks don't end up sharing a single "vendor"-like chunk which includes unused exports for SOME chunks. Webpack 5 now has deep scope analysis which has already improved the overall size of the bundle, with a better setup I believe it could produce even better results for us.
context:
I have an application with a single entry point which then separates itself into multiple purposes depending on the context. The way we do this is by using dynamic imports, and this would be akin to having multiple entry points but unfortunately we require this single wrapper that interprets the context and imports the remainder of the code.
Structure
App
- dynamic import moduleA /* webpackChunkName A */
- dynamic import moduleB /* webpackChunkName B */
moduleA
- import large feature nodeModuleX
- import small feature nodeModuleX
moduleB
- import small feature nodeModuleX
So my expectation here would be that I would end up with a chunk for app (main) importing chunk A which includes the two functions from nodeModuleX and importing chunk B which only includes the small function from nodeModuleX
Unfortunately by default (and with a lot of attempted configuration changes in the webpack's config) the best result I've managed to get makes both moduleB and moduleA import a larger chunk (eg.: vendor) that includes both functions from nodeModuleX.
For simplicity's purpose we can assume that nodeModuleX has set sideEffects to false in its package.json, as this was tried as well.
How can I make sure these split code chunks don't end up with unused imports? For our purposes only one dynamic import will happen per application launch, therefore we don't require the caching benefit of having a single 'vendor' chunk.
Thank you for any help! Please let me know if there is any confusion with my question and I'll try to explain further
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
