Improve tree shaking #6064
Improve tree shaking #6064
Conversation
|
Build successful! 🎉 |
|
Build successful! 🎉 |
…undler # Conflicts: # yarn.lock
|
Build successful! 🎉 |
|
Build successful! 🎉 |
1 similar comment
|
Build successful! 🎉 |
|
Build successful! 🎉 |
There was a problem hiding this comment.
The built example apps seem to work just fine still, is there a particular app configuration/setup that would easily demonstrate the build size improvement? I tried with my own nextJS/vite app locally w/ verdaccio locally but didn't see much of a difference in the build size but my test apps are quite simple
|
It would mainly affect RAC since RSP is already split per component (in multiple packages). Since RAC is only a monopackage, that's where you'd see a difference. |
|
Right, I pulled in just RAC TableView + Button into those test apps thinking the bundle size prior to building verdaccio on this branch would be dramatically larger since it would be pulling in everything (?) but they were still pretty similar before and after :/ |
|
@LFDanLu Depends how many components are being used I guess. Looking at the RAC + tailwind example, the version from this branch downloads 652kb vs 708kb on main. Inspecting the JS code you can see that for example the dnd hooks are no longer included in this version for example. But since it uses many of the components there's less of a difference than in a simpler app with only a few components. |
|
The RAC Spectrum + Tailwind example shows a much bigger difference since it only uses a few components: 892kb on main vs 245kb on this pr |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
## API Changes
unknown top level export { type: 'any' } @react-aria/i18nuseMessageFormatterchanged by:
-
+useMessageFormatter {
+ strings: LocalizedStrings
+ returnVal: undefined
+}FormatMessage-
+FormatMessage {
+ F: undefined
+}it changed:
|
Fixes #5798, closes #1669
This uses the new
@parcel/bundler-libraryplugin (parcel-bundler/parcel#9489) to build our packages for publishing to npm. This outputs many more files into the dist directory (one per input file) rather than bundling into a single dist file. That way, tree shaking is much more effective when consuming our libraries due to thesideEffectsfield in package.json, which allows a bundler to remove an entire file when nothing it it is used. Without this we rely on the minifier to analyze this which is difficult and more error prone.This mostly improves react-aria-components, which contains many components in a single package, rather than in individual packages. One example app I tested locally got 4x smaller after this change, and no longer included large things like drag and drop and table even when they weren't used.