-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bundle Size] lottie-web is 237.5kB minified— could this be improved? #1184
Comments
You can use the light version that only supports the svg renderer and no expressions. |
For reference, lottie_light is 144kB minified and 38.5kB minified + gzipped. I pulled it from https://unpkg.com/lottie-web@5.2.0/build/player/lottie_light.min.js to check the filesize. Considering the light version is half the size, are there additional improvements that could be made to make the light version lighter? |
Thank you guys for this information! |
Not sure light is a fair name when it's nearly 40kb. Should it be called lottie and lottie-full? |
This + the actual size of lottie files is are a pretty limiting constraint. I'm not quite sure this has been optimized for the web, where the first paint depends heavily on the initial js bundle size. On mobile it doesn't matter since it's only experienced at install time, but on web this is critical |
Unfortunately, trying to squeeze a good chunk of After Effects into anything smaller than 60Kb is not an easy task :) |
Is there a way to get the svg only lottie light through npm? Currently the docs recommend:
Could there an option for:
|
@aidanlister , you should be able to import it doing |
How does one define which player to use when its used as part of a build? I know when its specified in html its in the script tag but how do I get it to specifically use lottie_light.js as part of a build? for example, currently its being called like this:
does this mean its calling the lottie.js player? For lottie light would it be like this?
or DOES it have to be specified as a the path as mentioned above: |
Does anyone know what @bodymovin meant by 'expressions'? |
@seb-thomas they are referring to After Effect expression. In AE, you can put JS Code into animated properties. So, if the person who generated the JSON file used expression for that file, it wouldn't work. |
this is docs worthy |
I don't really agree, because coding them by hand would not have the overhead of Lottie / Lottie light. So it's not a 1:1 comparison. Lottie animations will almost always require more resources and size.
Are there metrics that prove that? Also, it's probably easier to "load on demand" for video files, since Lottie assets end up being bundled in JS bundles, and most people do not use code splitting correctly. A video file, in contrast, is a small file which only gets downloaded when requested on a particular page, and can being playing before its fully loaded. So I wonder, in real-world usage, if Lottie ends up taking up more time to interactive. |
Hello, same here, lottie is the biggest lib in our node_modules, I just checked if there is a way to optimize that, and we found the min, I will have a try, but we use json lottie file, will it work with the min version? Otherwise, do we need all the lottie player ? we only use json anims. Note: we use lottie-web through another module called react-native-web-lottie and we don't handle the import directly in our source code, see issue here, do you think it is possible to use the light version in here? Edit: we can |
airbnb/lottie-web#1184 https://unpkg.com/lottie-web@5.2.0/build/player/lottie_light.min.js Situation: Lottie JS Full Minified (i.e for Web, Android, etc) is blocking the main thread for 4s to 7s on average. This means that even though the HTML, CSS & Web JS have been parsed, other JS is still in progress. To the user, it looks like the blue loading bar is still active. This gives a bad impression.
According to Bundlephobia, lottie-web@5.2.0 is 237.5kB minified, and 60.5kB minified + gzipped.
Are there any potential optimizations that could be made? I'm interested in adopting Lottie, but it has a fairly substantial footprint.
The text was updated successfully, but these errors were encountered: