Explanation on optimization. splitChunks

[XiaofengXie16]

Hello,
After reading the documentation and various articles online, I am still unsure about the best practices on the use of splitChunks.
For example:

1. when should I use the default and when should I put in my custom config?
2. What would be the use case of "initial", "async", "all" chunks in practice? (I understand how each of them have different behaviors in terms of bundling dynamic vs static modules)

It would be great if someone can clarify on this topic for me. I am looking forward to make changes to documentation as well once I gain a good understand on it. Thank you in advance!!!

[alexander-akait]

In this case you don't need default value of splitChunks

when should I use the default and when should I put in my custom config?

Please use default, no you don't need to specify them, it is default

What would be the use case of "initial", "async", "all" chunks in practice? (I understand how each of them have different behaviors in terms of bundling dynamic vs static modules)

Answer based on what you want to achieve

If you provide more information I will give you answer

[XiaofengXie16]

So i have seen some people do custom cacheGroup config, I am not exactly sure:
1.how do you know you need it? What kind of signals you will look at?
2.When you add your own cache group, how do you know which chunk value (async, initial and all)you should pick?

[alexander-akait]

how do you know you need it? What kind of signals you will look at?

You need understand here how JS is loading in your app. For example you can have multiple same modules in async chunks from node_modules, so webpack by default extract them (in most of cases)

When you add your own cache group, how do you know which chunk value (async, initial and all)you should pick?

Again, based on what you want to achieve, if you need split code from initial chunks (i.e. <script> in your HTML) you need to use initial, for import().then() you need to use async, all applied on both.

Signals? Simple signal is multiple same modules in many chunks. Also cache, for example you don't do many changes in node_modules, so extract them in own chunks is good cache. Other signals can be based on your application perf (you can use dev tools in chrome to look at them).