[Bundle Size] lottie-web is 237.5kB minified— could this be improved?

[petermikitsh]

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.

[bodymovin]

You can use the light version that only supports the svg renderer and no expressions.
https://github.com/airbnb/lottie-web/tree/master/build/player

[petermikitsh]

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?

[apple77y]

Thank you guys for this information!

[tony-topper]

Not sure light is a fair name when it's nearly 40kb. Should it be called lottie and lottie-full?

[hipstersmoothie]

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

[bodymovin]

Unfortunately, trying to squeeze a good chunk of After Effects into anything smaller than 60Kb is not an easy task :)
Regarding the lottie files themselves, if you consider they hold all the svg data and the animation data, they are usually smaller than coding them by hand.
And it still beats a gif or video in file size.
Having said all that, I completely agree that it's far form ideal.
I'd love to see the WAAPI move forward or css supporting shape animations to delegate compatible animations to native solutions and remove the js part altogether.

[aidanlister]

Is there a way to get the svg only lottie light through npm?

Currently the docs recommend:

import lottie from 'lottie-web'

Could there an option for:

import lottie from 'lottie-web/svg-min'

[bodymovin]

@aidanlister , you should be able to import it doing
import lottie from 'lottie-web/build/player/lottie_svg.min.js'
or
import lottie from 'lottie-web/build/player/lottie_light.min.js'

[fseminario]

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:

import lottie from 'lottie-web';

does this mean its calling the lottie.js player? For lottie light would it be like this?

import lottie from 'lottie-light';

or DOES it have to be specified as a the path as mentioned above: lottie-web/build/player/lottie_light.min.js?

[seb-thomas]

Does anyone know what @bodymovin meant by 'expressions'?

[siskaoffeo]

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.

[eballeste]

@aidanlister , you should be able to import it doing
import lottie from 'lottie-web/build/player/lottie_svg.min.js'
or
import lottie from 'lottie-web/build/player/lottie_light.min.js'

this is docs worthy

[matthew-dean]

@bodymovin

Regarding the lottie files themselves, if you consider they hold all the svg data and the animation data, they are usually smaller than coding them by hand.

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.

And it still beats a gif or video in file 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.

[kopax-polyconseil]

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