Parcel v2.8.0
We are excited to announce the release of Parcel v2.8.0! This release includes a brand new bundling algorithm with improved automatic code splitting, much better build performance for large projects, and fixes for many bugs. It also includes major performance improvements for HMR updates, and tree shaking changes that we've seen reduce bundle sizes by up to 50%.
New bundling algorithm
#Since our initial v2 release, Parcel has supported automatic code splitting, which deduplicates shared modules between multiple parts of your app (e.g. pages, dynamic imports, etc.). This allows commonly used dependencies like React or a design system to be cached independently from application code, reducing the amount of code that must be loaded when navigating between pages. Because it is automatic, it doesn't need to be configured or updated manually by developers, keeping your app optimal as you make changes.
Our initial implementation worked well on small to medium size projects, but hit scalability issues on larger projects. The algorithm involved many nested graph traversals (quadratic time complexity), and often ended up doing work which was later undone. In addition, the implementation was somewhat buggy, sometimes resulting in unnecessary duplication, or even missing modules.
The team at Atlassian has contributed a new bundling algorithm that solves these problems, significantly improving both build time and runtime performance. It takes a different approach than the previous implementation: rather than initially placing all assets into bundles based on manual code split points (e.g. dynamic import) and then removing duplication afterward, it starts with a graph containing no duplication (each asset is in only one bundle). It then combines bundles as needed to meet constraints like parallel request limits and minimum bundle size requirements. It also reduces time complexity by pre-computing more information and removing nested graph traversals.
This results in both smaller bundles and much faster builds. For a very large real-world project with over 60,000 assets, overall build time was reduced from over 25 minutes to 9 minutes (2.7x faster). The total bundle size for the whole project went from 952 MB to 370 MB (2.5x smaller). For comparison, building the same app with webpack takes over 45 minutes.
We've been working on this new bundling algorithm for a long time, and we're excited to finally make it the default in this release. Huge thanks to the Atlassian team for contributing this improvement!
HMR rebuild performance
#In addition to improving bundling performance, we have also been working on making incremental rebuilds and HMR updates even faster. This release includes three new features in this area: incremental bundling, single threaded compilation, and earlier HMR updates.
Some tools avoid bundling entirely in development by utilizing ESM in the browser to load each module individually. This means when a file changes, only that one file needs to be transformed, rather than recomputing the entire bundle. However, for large projects with many modules, this approach means the browser must make hundreds or even thousands of cascading HTTP requests on page load. Additionally, when performing an HMR update, the browser must make a network request to reload each updated file. Dependent modules must also be manually updated since there is no way of invalidating a module in the ESM module registry.
Parcel already has a development-only packager which does a lot less work than the production one (e.g. no tree shaking), but for large apps, the bundling algorithm described above could still be a bottleneck. However, most code changes are fairly simple – they affect only a single file, without adding or removing any dependencies. In these cases rebundling is unnecessary, and Parcel can now simply update the asset in place without rerunning the entire bundling algorithm. In addition, Parcel now compiles and packages on the main thread when only a single file changed to avoid the cost of serializing the bundle graph to send between workers.
This incremental bundling can make a huge difference – for example, rebuild times for the large project described above were reduced from 40 seconds to 4 seconds (10x faster)!
In addition, Parcel now sends HMR updates to the browser over a websocket before packaging bundles is even complete. Our custom development-only module format enables us to re-evalutate the changed modules and swap them in place with no additional network requests necessary. This effectively means HMR updates require the same amount of work as if they were not bundled, scaling with the size of the changes rather than size of the project, and avoiding network waterfalls during page load.
We've been benchmarking our end-to-end HMR update performance versus other tools. The following results show the time from saving a file to seeing updates in the browser for a React app with 1000 components:
| Vite | Turbopack | Parcel | |
|---|---|---|---|
| Root | 293.5ms | 274.8ms | 88.6ms |
| Leaf | 143.8ms | 57ms | 37.4ms |
- Parcel is 68% faster than Turbopack, and 70% faster than Vite at updating the root component.
- Parcel is 34% faster than Turbopack, and 74% faster than Vite at updating the leaf component.
See this repo for full benchmark source code and results.
Tree shaking improvements
#This release also includes improvements to tree shaking with code splitting. Previously, if you used a large library containing an index file with many re-exports, Parcel would always place all of the used exports in the same bundle. For example, if you used different components from a component library on different pages or code split points (e.g dynamic import), all used components across your whole project would be placed into the entry bundles. This could mean loading much more JavaScript than necessary on initial page load.
Parcel now rewrites dependencies to point to their final destinations, following all re-exports found along the way. This means re-exports in side effect-free packages now have no effect on code splitting, and only used exports within each bundle are loaded. In many applications, this means the entry bundle will become much smaller since more code will only be loaded when needed.
Results will depend on how many re-exports you rely on and your code splitting setup, but we have seen some impressive improvements in several applications so far. One very large app saw over 40% smaller JS entry bundles, while another saw a 25% smaller JS entry and 50% smaller CSS.
Thanks to Niklas Mischkulnig for contributing this improvement!
Thanks!
#Parcel v2.8.0 includes several other smaller features, bug fixes, and improvements. Check out the full release notes for more details.