🌲 Reduce bundle size on Web by 80%

[nandorojo]

Description

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 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:

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. 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

• Included code example that can be used to test this change
• Updated TS types
• Added TS types tests
• Added unit / integration tests
• Updated documentation
• Ensured that CI passes

[RazaShehryar]

We need this approved!

[piaskowyk]

@nandorojo wow, so impressive! 🤯 I will test, merge, and release it after App.js conf. Is it acceptable for you?

[nandorojo]

Sounds good!

[hirbod]

@natew just stumbled across your Tamagui documentation (especially the bundle size part with reanimated).
I think this is also interesting for you. (hope you don't mind the random tagging)

[piaskowyk]

Is it possible to replace export * as default with something that doesn't require an additional babel plugin? The directive as default needs the proposal-export-namespace-from plugin. I'd rather not force users to install additional dependencies if it isn't necessary. Apart from it, everything is great!

[nandorojo]

Interesting, I didn’t know this required an extra plugin. It worked fine in my expo app — does expo’s babel preset include this?

[nandorojo]

The benefit of export * as default is that it maintains tree shaking, since it doesn't pair the imported variables into a single object.

The current approach of making a unified Animated variable is that all the code of that object gets included.

I'll see if there is an alternative approach.

[nandorojo]

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.

[piaskowyk]

I tested:

import * as Animated from './Animated'
export default Animated

and the size increased from 17.1 kB to 37.6 kB 😕

[nandorojo]

Hmm yeah I found the same thing...seems like export * as default is the only way to tree shake that I see.

I'll keep poking around.

[nandorojo]

Related: facebook/metro#760

[piaskowyk]

Summary:
export * as default requires @babel/plugin-proposal-export-namespace-from plugin, but we want to avoid additional manual user setup.

I tried to replace export * as default directive with equivalent syntax:

const rea2 = require('./reanimated2')
const Animated = require('./Animated')
const exports = rea2
exports.default = Animated
module.exports = exports

it works correctly, but usage of require breaks tree shaking - more about it here

Finally, I decided to call @babel/plugin-proposal-export-namespace-from plugin from Reanimated plugin to avoid additional setup.

[piaskowyk]

@nandorojo could you verify if everything works for you properly?

[nandorojo]

yeah! have some calls soon but I'll test it after

thanks for reviewing this closely

[nandorojo]

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.

[piaskowyk]

You're right. The plugin is required to run the application.

[nandorojo]

ah, I missed the fact that you added it to the dependencies. cool

[nandorojo]

What's a good way for me to install this PR somewhere and test it?

[piaskowyk]

I think you can use your repo (https://github.com/nandorojo/reanimated-tree-shaking) to install reanimated from commit:

"react-native-reanimated": "github:software-mansion/react-native-reanimated#e278369025e2abb22258ed3fbd1a78484b9afccf"

and then you just move files from node_modules/react-native-reanimated to lib/react-native-reanimated and everything should work.

I tested it on a new blank react-native app, and on the Example app in the Reanimated repo.

[nandorojo]

So I tried doing that, but it seems that there is no react-native-reanimated/lib file when I install from that commit. How do I generate lib? Is there a build script? I can't seem to find one.

I want to be sure to test on react-native-reanimated/lib and not on src, since transpilation can potentially break tree shaking, and the build step might transpile the library.

Should I just run yarn bob build?

[nandorojo]

These are the steps I took to make it work in my Next.js app:

1. Install the version from this PR in my app
2. Run npx @react-native-community/bob build inside of node_modules/react-native-reanimated
   i. Is this correct?
   ii. Change main to lib/commonjs/index in the Reanimated package.json
   iii. Change module to lib/module/index in the Reanimated package.json
3. In my next.config.js:
   i. I added react-native-reanimated to next-transpile-modules
   ii. Maybe we could document this for Next.js users to optimize for tree shaking later

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 package.json to point to lib/module and lib/commonjs. If we aren't using Bob – what is being used instead to generate the lib folder? Is it just a symlink?

The result looks correct. The page with reanimated is only 17kb greater than the plain RN page:

So, once I know how we do the build script, I can test that and then we'll be good to go.

[nandorojo]

Ah, I see, the build script is yarn type:generate. I tried this. It looks like yarn type:generate increased the bundle size significantly.

This is what yarn type:generate results in:

Notice that it's no longer doing export * as default. That's why it isn't tree shaking. If I manually override that, then it works 😅

If we switch to react-native-builder-bob for the build script, then the tree shaking works for the module output. I'm going to dig into the build script and see if it can preserve export * as default.

[nandorojo]

I fixed it by changing the module to ESNext in tsconfig.json. The output is now correct:

I'll add that to the PR.

[nandorojo]

Okay, tested & ready to merge!

I did the following since your changes:

1. Rebase main
2. Edit tsconfig.json's module to support newer syntax for export * as default
3. Add lib/index as a side effect in package.json

[piaskowyk]

It will be available in the next release - it should happen this week. Thanks for the help 🙌

[nandorojo]

Thanks for the review and help here @piaskowyk!

[shamilovtim]

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.

[nandorojo]

maybe set vs code to the newest TS version

[blackbing]

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.

[nandorojo]

I don't expect this to work on v2, since it includes v1 code that isn't optimized.

[edkimmel]

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?

[nandorojo]

i think there’s been a regression, see #3650