Menu
I'm looking for a clear explanation of the difference between these two options in webpack. I've read the description here but the difference is not clear. Quoting the description:
Setting the optimization.splitChunks.chunks option to "all" initial chunks will get affected by it (even the ones not imported dynamically). This way chunks can even be shared between entry points and on-demand loading.
755
splitChunks. fallbackCacheGroup. maxSize ) tells webpack to try to split chunks bigger than maxSize bytes into smaller parts. Parts will be at least minSize (next to maxSize ) in size. The algorithm is deterministic and changes to the modules will only have local effects.
Tells webpack to determine and flag chunks which are subsets of other chunks in a way that subsets don't have to be loaded when the bigger chunk has been already loaded. By default optimization. flagIncludedChunks is enabled in production mode and disabled elsewise.
Each of the runtime files contains code that enables loading of your chunks. If you open any of those runtime files, you will see code that loads your chunks via Jsonp. Since you have asked webpack to split chunks, you are now free to load any chunk any time.
Webpack injects some code into main. js which takes care of lazy loading async chunks and stops from loading same chunks again and again. When a route changes, React router calls a Webpack function to load a chunk file and Webpack after done loading runs it, which chunk then would internally ask React to do something.
Trying for the simplest explanation. This is the file that will be transpiled and bundled:
//app.js
import "my-static-module";
if(some_condition_is_true){
import ("my-dynamic-module")
}
console.log("My app is running")
Now see how different optimization types will treat it.
async (default):
Two files will be created.
initial:
Three files will be created
all:
Two files will be created
"all" will have the smallest overall size.
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
