search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.54k stars 2.87k forks source link

Add support for tree-shaking #2852

Open rafael-pinheiro opened 2 years ago

rafael-pinheiro commented 2 years ago

This is an improvement request. With good practices on exporting the functionalities from a module you can make it possible for bundler to do tree-shaking and remove unused logic from the final website bundle. It seems to not be possible with Lottie right now, so it bundles the whole library and that can make the website way heavier. Websites are being penalized on their SEO score and user experience because of this.

Any plans to improve this?

bodymovin commented 2 years ago

It'd be great to support some sort of tree-shaking.
But since the required modules depend on all the jsons that are part of the application, I'm not sure if there is a straightforward way of retrieving all jsons, analyze them, and build a lottie version that only loads the required features.
Lottie animations can be loaded in two different ways, as imports, or providing a path to the json. Probably if they are loaded as imports, it could be simpler to get a list of the jsons, but any Kbs gained from tree-shaking would be lost from bundling all animations as part of the build. On the other hand, if they are loaded as paths, I'm not sure there is a way during the bundling process, to retrieve the files and analyze them.
Any help here is welcome since I'm no expert on bundlers and how to support it.

quantizor commented 1 year ago

Dynamic import for your JSONs isn’t an option? Ship them side by side with your built JS and just dynamically import as you need them and let the client-side bundler handle resolution and packaging