Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blog post for v2.8 #1055

Merged
merged 5 commits into from Nov 9, 2022
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
56 changes: 56 additions & 0 deletions src/blog/v2-8-0/v2-8-0.md
@@ -0,0 +1,56 @@
---
layout: layout.njk
title: Parcel v2.8.0
eleventyNavigation:
key: blog-parcel-2-8-0
title: Parcel v2.8.0
date: 2022-11-09
---

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](/features/code-splitting/#shared-bundles), 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) and 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 project, 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**).
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AGawrys I'd like to give some estimate of the size of the project. Do you have a count of the number of assets/bundles that I could share?

Also, any comparison with the webpack build time (if favorable 😉)?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can get you some of the current numbers tomorrow, though that won't be the same as when we first implemented the change (so the relative improvement might not be accurate).


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 send 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 updated file and all recursive dependent modules must be reloaded, since there is no way to invalidate a single module in the ESM registry. This slows down updates for large projects with deep module graphs.

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

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, while avoiding network waterfalls during both page load and HMR updates.

We've been benchmarking our end-to-end HMR update performance versus other tools. The results speak for themselves:

~~ TODO ~~

## 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 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.
mischnic marked this conversation as resolved.
Show resolved Hide resolved

Results will depend on how many re-exports you rely on and your code splitting setup, but we have seen impressive results 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.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

40% was the latest number I found on parcel-bundler/parcel#8432 (comment) but lmk if there is an updated one @AGawrys @marcins


Thanks to [Niklas Mischkulnig](https://twitter.com/mischnic) 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.

- [GitHub](https://github.com/parcel-bundler/parcel)
- [Discord community](https://discord.gg/XSCzqGRuvr)
- [Support us on Open Collective](https://opencollective.com/parcel)