Currently when using 3rd party NPM dependencies, they get lumped together into a single vendor.js bundle. However, with a lot of dependencies, that bundle file can get huge. It would be great if there was an easy way to split the bundle file, perhaps based on the name of the dependency. This new feature would be great for multi-page apps which may have some shared core dependencies, and a few unique ones for particular pages.
For example, an app might use Bootstrap and jQuery everywhere, but it only needs the zxcvbn password library on one or two different entrypoints. There's really no need to include it in the main vendor.js bundle.
I was inspired by this video by Fredrik Christenson who makes a good argument that some dependencies may change frequently, and the whole vendor bundle shouldn't need to be updated every time. He argues splitting chunks can actually make for more efficient bundling.
https://www.youtube.com/watch?v=p6XY26J1ycs
Currently when using 3rd party NPM dependencies, they get lumped together into a single vendor.js bundle. However, with a lot of dependencies, that bundle file can get huge. It would be great if there was an easy way to split the bundle file, perhaps based on the name of the dependency. This new feature would be great for multi-page apps which may have some shared core dependencies, and a few unique ones for particular pages.
For example, an app might use Bootstrap and jQuery everywhere, but it only needs the zxcvbn password library on one or two different entrypoints. There's really no need to include it in the main vendor.js bundle.
I was inspired by this video by Fredrik Christenson who makes a good argument that some dependencies may change frequently, and the whole vendor bundle shouldn't need to be updated every time. He argues splitting chunks can actually make for more efficient bundling. https://www.youtube.com/watch?v=p6XY26J1ycs
Other interesting posts: https://blog.jakoblind.no/code-split-vendors-with-webpack-for-faster-load-speed/ https://www.codemzy.com/blog/how-to-name-webpack-chunk