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

[petermikitsh]

According to Bundlephobia, [email protected] 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/[email protected]/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?