re: We reduced our vendor.js from 210kb to 16kb in about five minutes of work and ten lines of code VIEW POST

FULL DISCUSSION
 

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 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.

code of conduct - report abuse