Reduce bundle size / improve tree shaking

[nandorojo]

Update: I opened a PR here: #3278

---

Reanimated's bundle size is currently massive, and it doesn't have any optimizations for tree shaking. As a result, by using Reanimated, my website is loading in a lot of code it doesn't actually use.

When I import it in a Next.js project, and run ANALYZE=true yarn next build using @next/bundle-analyzer, this is the output I see.

Reanimated and Gesture Handler add 60kb and 25kb gzipped (respectively).

framer-motion had a similar issue, but they optimized it very well. I'm wondering if there could be a similar solution for Reanimated.

What if we added an extra tree export, like:

import { createAnimatedComponent, withTiming, AnimatedView } from 'react-native-reanimated/tree'

That way, we could find a way to tree shake the library without causing a breaking change.

The main export file could import from the tree.ts file, so that there isn't duplicate code.

[RazaShehryar]

really need this feature

[nandorojo]

I made a repo playground: https://github.com/nandorojo/reanimated-tree-shaking

[ponikar]

Just checking if we find a solution to reduce the bundle size. in our react native project the reanimated takes 510KB.