Skip to content

Feature Request: Add Ability to Split Vendor Chunks #48

@homestar9

Description

@homestar9

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions