search

chenqingspring / react-lottie

Render After Effects animations on React based on lottie-web
MIT License
1.69k stars 361 forks source link

Large Lottie json increases bundle size. #142

Open krishnagogada opened 2 years ago

krishnagogada commented 2 years ago

I have Lottie JSON file with 500KB. If I keep it in the public folder, it will increase the bundle size.

Is there any best practice to use Lottie JSON file and not increase the bundle size?

jonator commented 2 years ago

Have you tried dynamically importing the json file as an object with await import("./lottie.json")?

I'm using next.js and my json file is excluded from the main bundle when I dyamically import the json into a state variable within a useEffect hook. Then, I pass that value into the animationData member of the options prop in the <Lottie /> component.