Lottie player bundle size is massive – is there a light version or potential optimisations?

[toddpadwick]

Lottie web player is 334kb and 84kb gzipped, which is massive - especially considering most of the time, lottie only offers cosmetic value rather than any functional or UX value. it has the largest footprint on my site out of any plugin or module. Are there any optimisations that can be done, or is a reduced 'light' version available?

For context, my site is a NuxtJS app.

[jacobwinters]

I've had some luck building with the light versions of lottie-web. Replacing lottie-web/build/player/lottie with lottie-web/build/player/lottie_svg in lottie-player.ts produces a 287KB file (75KB gzipped); using lottie_light gives a 190KB file (53KB gzipped).

I tried replacing lottie-web with jLottie. The bundle was only 85KB, but it didn't work. Among other things, it appears that jLottie doesn't work inside of shadow DOMs.

Depending on what browsers you support, it's also possible to save a few kilobytes of polyfills by adjusting the target browsers in babel.config.js.

[toddpadwick]

Hey @jacobwinters thanks for the pointers. Struggling to work out how to implement your first recommendation though. I am using lottie web in a Nuxt js (vue js) project. I am importing the plugin with the following code:

    import Vue from 'vue';
    import LottiePlayer from "@lottiefiles/lottie-player";

Does your suggestion require me to clone the plugin and make the change in the source? or is there a way while still using the NPM package?

[jacobwinters]

The prebuilt files that get published in the npm package already have the full version of lottie-web built in. To get a version of lottie-player that uses a light version of lottie-web I'm afraid you'd need to clone this repo and build it yourself, then arrange for your app to use your custom lottie-player build.

[samuelOsborne]

@toddpadwick Have checked out lottie-light? This repo wraps the lottie-web player from Airbnb and uses the full sized player at the moment, you can use a lighter version if you import lottie-web:

https://github.com/airbnb/lottie-web

And then import lottie-light:

import lottie from 'lottie-web/build/player/lottie_svg.min.js'
or
import lottie from 'lottie-web/build/player/lottie_light.min.js'

[toddpadwick]

Hey @samuelOsborne I would still need the lottie-player as I am using some of the interactivity features. Is there a way to still use lottie player but with lottie light, without cloning the repo?

[samuelOsborne]

@toddpadwick Not at the moment, and implementing it on our side would mean creating and maintaining a separate repository as it's an import.. what interactivity features are you using ?

[samuelOsborne]

Closing this issue due to lack of activity.