Reduce web bundle size

[bartlomiejbloniarz]

Summary

This PR moves some web implementations to .web.ts files, so that native implementations are excluded from the bundle. Some changes here might be controversial (e.g. SharedTransition.web.ts), since they introduce some level of code duplication. These changes, however, allow webpack to better recognize which code should be excluded from the bundle.

While working on this issue I also found some other areas that can be changed in the future to further optimize the bundle size:

• lazy load layout animations on web
• change the plugin to exclude some worklet fields (e.g. code) on web (afaik there is no babel supported way to recognize if we are on web)

Test plan

Run yarn build in NextExample. The difference between reanimated.js and noreanimated.js should be around 43kB.

[tomekzaw]

• change the plugin to exclude some worklet fields (e.g. code) on web (afaik there is no babel supported way to recognize if we are on web)

Sounds like something worth doing. For now, we could support it via some environment variable, e.g. REANIMATED_BABEL_PLUGIN_BUNDLE_FOR_WEB=1 (or something shorter) which can be enabled on demand. cc @tjzel

[tomekzaw]

Overall the approach is correct but there are still some little things to be addressed prior to merging. I've left a few suggestions, but let's write them down and apply them in separate PRs. Let's keep the scope of this PR as web-oriented as possible and we can improve other things later.

[tomekzaw]

Great job! 👏