we have ~25mb size webpack 4 bundle (we also use LimitChunkCountPlugin with maxChunks:1) to prevent webpack auto-splitting.
Now we try to optimize app start time and decision was made to split away code that can be imported during runtime.
After reading some webpack references, I tried to use dynamic imports option. Then, for testing I tried to spit small (2kb) file away from main module like that:
const { something } = await import(/* webpackChunkName: "someHelpers" */ '../someHelpers');
After building with webpack nothing happened, still 1 big chunk of code. I tried to increase the 'maxChunks:2', and after build I see 2 chunks now. One main, and one someHelpers.bundle.js.
However the someHelpers.bundle.js size is now 6.9 mb - Checking with bundle analyzer, I found out that in addition to my small 2kb file, it also splitted away some node_modules and unrelated parts of code. This makes the splitting absolute nonesence, as the module will be imported at any other time than I actually want (in line of the dynamic import...)
If I totally remove LimitChunkCountPlugin, I will get ~40 chunks and one of them will be my 'someHelpers.bundle.js'(this time its size will be just 2kb).
The issue is that we don't want to use the default webpack split, obly our 'controlled' one.
Did anyone faced this problem before? How can I leave my big chunk as 'default' one size, and only split the small parts of code using dynamic imports, that each of them will create a separate chunk (this should happen by design from what I understand).
Thx in advance!