-
Notifications
You must be signed in to change notification settings - Fork 469
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
Blog post for v2.8 #1055
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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**). | ||
|
||
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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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) |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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 😉)?
There was a problem hiding this comment.
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).