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
Results #1
Comments
I suspect this might be due to the second one where it is importing all of the RNW. |
After upgrading to Reanimated v3, which has lower size since it removes all of Reanimated v1 code, the bundle size of the page already decreased by like 20kb (~25%)! So it may still be due to importing all of RNW, but it seems like the Reanimated size certainly has an impact. Going to investigate further. |
The Overall, this is good news. If this import size is only due to the components, that's likely easy to optimize. However, I don't think that's the full story... Here is the size with all components, minus FlatList ( |
Interesting. What's the next step? Create an issue on RNW? 😢 |
I still want to find where the remaining bloat from reanimated is coming from. As for FlatList, probably best to not use on Web. It doesn't offer any benefits besides code sharing anyway, since it doesn't optimize performance on Web or do any virtualization. |
So you suggest to completely get rid of the FlatList components on the web and instead replace it with a ScrollView? |
It's your call, but if you want to avoid the 10kb of FlatList on web, you could do that yeah. |
Adding Does reanimated Web have side effects, such as initializing global variables? If so, we should put those all into one file. |
With zero optimizations:
Add
|
I think I have the solution for named exports: do both named exports and default one. Now that the default one can be tree shaken, as long as you don't import it, then it won't affect bundle size. Instead, if we use star imports, it will import a smaller bundle: import * as Animated from 'react-native-reanimated' With this method, we can have no breaking changes and still preserve |
Default import has been solved. Opening a PR on react-native-reanimated. |
I opened a PR at software-mansion/react-native-reanimated#3278 |
## Description <!-- Description and motivation for this PR. Inlude Fixes #<number> if this is fixing some issue. Fixes # . --> Fixes #2843. Reduces Reanimated's bundle size on Web from `85kb` to `17kb`. ## Changes Zero user-facing changes are in this PR. It is strictly file organization changes to optimize Reanimated for tree shaking. After extensive testing, this PR reduced Reanimated's bundle size on Web by almost 80%. In `package.json`, you'll notice that there is a new `sideEffects` array. This is a way to tell Webpack which files need to run global code rather than as standalone modules. I looked through every file that runs on Web which edits `global` at the top-level and found 2 files. Ideally, we could move all side effects into a single file rather than colocating them with other code that may go unused. But for now, this works. (Update: I moved some into their own file) More on Webpack tree shaking and the `sideEffects` field can be found here: https://webpack.js.org/guides/tree-shaking/ ## Screenshots / GIFs I created a fresh [repo](https://github.com/nandorojo/reanimated-tree-shaking) to fix tree shaking for Reanimated. The playground tests it by building in a Next.js app (the most common framework for Web). Prior to this PR, this imported _all_ code from Reanimated: ```ts import Animated from 'react-native-reanimated' ``` This resulted in an absolutely massive impact on the Web bundle size, approximately 85kb, including tons of unused code (such as layout animations). This PR reduces the Reanimated overhead down to about `17kb`. In the future, I may be able to investigate further improvements by seeing where that size is actually coming from. But this PR is a massive step forward, since it provides no changes to the user. I wrote about my findings [here](nandorojo/reanimated-tree-shaking#1). There are plenty of detailed screenshots there. ### Before Massive bundle size on Web, nearly unusable. ### After It's now very optimized for tree shaking. ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [ ] Added TS types tests - [ ] Added unit / integration tests - [ ] Updated documentation - [x] Ensured that CI passes
## Description <!-- Description and motivation for this PR. Inlude Fixes #<number> if this is fixing some issue. Fixes # . --> Fixes software-mansion#2843. Reduces Reanimated's bundle size on Web from `85kb` to `17kb`. ## Changes Zero user-facing changes are in this PR. It is strictly file organization changes to optimize Reanimated for tree shaking. After extensive testing, this PR reduced Reanimated's bundle size on Web by almost 80%. In `package.json`, you'll notice that there is a new `sideEffects` array. This is a way to tell Webpack which files need to run global code rather than as standalone modules. I looked through every file that runs on Web which edits `global` at the top-level and found 2 files. Ideally, we could move all side effects into a single file rather than colocating them with other code that may go unused. But for now, this works. (Update: I moved some into their own file) More on Webpack tree shaking and the `sideEffects` field can be found here: https://webpack.js.org/guides/tree-shaking/ ## Screenshots / GIFs I created a fresh [repo](https://github.com/nandorojo/reanimated-tree-shaking) to fix tree shaking for Reanimated. The playground tests it by building in a Next.js app (the most common framework for Web). Prior to this PR, this imported _all_ code from Reanimated: ```ts import Animated from 'react-native-reanimated' ``` This resulted in an absolutely massive impact on the Web bundle size, approximately 85kb, including tons of unused code (such as layout animations). This PR reduces the Reanimated overhead down to about `17kb`. In the future, I may be able to investigate further improvements by seeing where that size is actually coming from. But this PR is a massive step forward, since it provides no changes to the user. I wrote about my findings [here](nandorojo/reanimated-tree-shaking#1). There are plenty of detailed screenshots there. ### Before Massive bundle size on Web, nearly unusable. ### After It's now very optimized for tree shaking. ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [ ] Added TS types tests - [ ] Added unit / integration tests - [ ] Updated documentation - [x] Ensured that CI passes
Here are the preliminary results for an empty page. Compare
/
to/reanimated
. They are both identical, but Reanimated has80kb
greater.Some questions to answer:
react-native-web
, breaking its babel plugin that tree shakes imports fromreact-native
directly?a. If it is indeed breaking because it's importing all of RNW, this is an easy solution. We just need to split the
createAnimatedComponent
calls ofText
,View
, etc. into their own files. See Dripsy for an example.sideEffects: true
to Reanimated change?The text was updated successfully, but these errors were encountered: