Is there a way to extract packages to a separate bundle via configuration?

[flexdinesh]

I couldn't figure out how to extract specific packages to a separate bundle.

Every change creates a new bundle with a new hash. This effectively busts CDN cache with every new build. Big packages used in react apps stay the same between builds until the version is upgraded. Eg. react, react-router, emotion, apollo, etc. If we could specify specific packages via configuration and extract them to a separate bundle, that bundle would remain the same between builds until one of the package version is upgraded.

In applications where new changes are released everyday, users will only need to download the new app bundle after a new release if the package bundle is already cached in the browser. In one of the projects I work with - over 350Kb of npm packages + internal packages could be cached for repeat users if these packages could be extracted to a separate bundle since there's a new release every 20 mins.

I found a cheeky way to do this using shared dependencies — https://parceljs.org/features/code-splitting/#shared-bundles
I created a new html file that imports a dummy duplicate.tsx file. I created a useless react tree in duplicate.tsx with all the packages that I want to be in a separate bundle. This approach kinda works but would be good to have an API way of doing this.

Webpack does this with vendor entries — https://webpack.js.org/concepts/entry-points/#separate-app-and-vendor-entries

I've created an example repo here that extracts vendor packages into a separate bundle using shared bundles approach — https://github.com/flexdinesh/parcel-extract-vendor-bundle

Parcel version : 2.2.1

[doup]

Did you find another way to solve this? I want to Parcel to create a vendors bundle for third party packages… but I can't see any mention to this. I looks like it does deduplication only when there are several entry points.

[eugene-khyst]

In Parcel 2.12.0 a Manual shared bundles feature was introduced - https://parceljs.org/blog/v2-12-0/#manual-shared-bundles

It looks like a dummy duplicate.tsx file is not required anymore to extract vendors into a separate bundle.