Out of curiosity, where are the other 194KB? I would assume they are in another vendor chunk. Right?
Webpack 4 has the concept of initial and async chunks. Dynamic imports are automatically separated from your original bundle.js and are downloaded on demand by the Webpack runtime.
An interesting thing is that you can prefetch your async bundle. Prefetching is an ambiguous term but it means that the browser will download this resource with super low priority. This is cool because you can induce the browser to not block your render but download it as soon as possible in such a way that it will possibly be already there by the time it is needed. I didn't check the internals of how this works in Webpack 4 but there is a high change that the Webpack runtime will auto prefetch async bundles.
The other 194 are in chunks that load when import is called within the code.
Some are quite deep in app logic and we really never want them for most visits. They are only called as necessary. We would maybe want to prefetch them once folks get close to where they would be hidden, but that's about it.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Great job Ben =)
Out of curiosity, where are the other 194KB? I would assume they are in another vendor chunk. Right?
Webpack 4 has the concept of initial and async chunks. Dynamic imports are automatically separated from your original bundle.js and are downloaded on demand by the Webpack runtime.
An interesting thing is that you can prefetch your async bundle. Prefetching is an ambiguous term but it means that the browser will download this resource with super low priority. This is cool because you can induce the browser to not block your render but download it as soon as possible in such a way that it will possibly be already there by the time it is needed. I didn't check the internals of how this works in Webpack 4 but there is a high change that the Webpack runtime will auto prefetch async bundles.
The other 194 are in chunks that load when
importis called within the code.Some are quite deep in app logic and we really never want them for most visits. They are only called as necessary. We would maybe want to prefetch them once folks get close to where they would be hidden, but that's about it.