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
🌲 Reduce bundle size on Web by 80%
#3278
Conversation
We need this approved! |
@nandorojo wow, so impressive! |
Sounds good! |
@natew just stumbled across your Tamagui documentation (especially the bundle size part with reanimated). |
Is it possible to replace |
Interesting, I didn’t know this required an extra plugin. It worked fine in my expo app — does expo’s babel preset include this? |
The benefit of The current approach of making a unified I'll see if there is an alternative approach. |
I'm going to try by doing this: import * as Animated from './Animated'
export default Animated I think it should still tree shake, will let you know. |
I tested:
and the size increased from 17.1 kB to 37.6 kB |
Hmm yeah I found the same thing...seems like I'll keep poking around. |
Related: facebook/metro#760 |
Summary: I tried to replace const rea2 = require('./reanimated2')
const Animated = require('./Animated')
const exports = rea2
exports.default = Animated
module.exports = exports it works correctly, but usage of Finally, I decided to call |
@nandorojo could you verify if everything works for you properly? |
yeah! have some calls soon but I'll test it after thanks for reviewing this closely |
the plug-in should be a direct dependency of reanimated, rather than a peer dependency, right? the current code looks like users will have to install the new plugin. |
You're right. The plugin is required to run the application. |
ah, I missed the fact that you added it to the |
What's a good way for me to install this PR somewhere and test it? |
I think you can use your repo (https://github.com/nandorojo/reanimated-tree-shaking) to install reanimated from commit:
and then you just move files from I tested it on a new blank react-native app, and on the Example app in the Reanimated repo. |
So I tried doing that, but it seems that there is no I want to be sure to test on Should I just run |
These are the steps I took to make it work in my Next.js app:
I'm curious if the step I took for 2 above is correct or not. If we're using Bob to build, then we should edit the The result looks correct. The page with So, once I know how we do the build script, I can test that and then we'll be good to go. |
Ah, I see, the build script is This is what Notice that it's no longer doing If we switch to |
Okay, tested & ready to merge! I did the following since your changes:
|
It will be available in the next release - it should happen this week. Thanks for the help |
Thanks for the review and help here @piaskowyk! |
How do you get your editor to work with this export/import style? I've found in the past that this completely busts IDEs and Intellisense. |
maybe set vs code to the newest TS version |
How to check to bundle size difference? I update react-native-reaniamted@2.4.1 to 2.9.1, but I didn't see the difference from bundle size via webpack-bundle-analyzer. |
I don't expect this to work on v2, since it includes v1 code that isn't optimized. |
Hello, my reanimated web bundle actually increased when moving from 2.x to 3.1. Is there anything we have to do regarding reorganizing imports to get the tree shaking benefits? |
i think there’s been a regression, see #3650 |
## 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
Description
Fixes #2843.
Reduces Reanimated's bundle size on Web from
85kb
to17kb
.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 newsideEffects
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 editsglobal
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 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:
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. 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