[Feature Request] Optimizing production bundle size using light version of lottie-web player

[kopax-polyconseil]

Hello,

According to this issue airbnb/lottie-web#1184 there is a "light" version, that can be used like in here: https://github.com/garbit/lottie-web-vue/pull/5/files

So far we will test it with a patch-package, but would be nice to be able to change this here.

I am not sure if it can break for some, how would your recommend to do that ?

Thanks!

[kopax-polyconseil]

I just tested and it work, this is the size after:

Can we add this here and if so how ?

[kopax-polyconseil]

What about doing this :

index.js

import React, { PureComponent } from 'react';
import lottie from 'lottie-web';
import Animation from './Animation';

export default React.forwardRef((props, ref) => (
  <Animation {...props} ref={typeof ref == 'function' ? (c) => ref(c && c.anim) : ref} lottie={lottie} />
));

light.js

import React, { PureComponent } from 'react';
import lottie from 'lottie-web/build/player/lottie_light.min';
import Animation from './Animation';

export default React.forwardRef((props, ref) => (
  <Animation {...props} ref={typeof ref == 'function' ? (c) => ref(c && c.anim) : ref} lottie={lottie} />
));

and Animation.js

import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import { View } from 'react-native';

export default class Animation extends PureComponent {
  animationDOMNode = null;

  componentDidMount() {
    this.loadAnimation(this.props);

    if (typeof this.props.progress === 'object' && this.props.progress._listeners) {
      this.props.progress.addListener((progress) => {
        const { value } = progress;
        let frame = value / (1 / this.anim.getDuration(true));
        this.anim.goToAndStop(frame, true);
      });
    }
  }

  componentWillUnmount() {
    if (typeof this.props.progress === 'object' && this.props.progress._listeners) {
      this.props.progress.removeAllListeners();
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.source && nextProps.source && this.props.source.nm !== nextProps.source.nm) {
      this.loadAnimation(nextProps);
    }
  }

  loadAnimation = (props) => {
    if (this.anim) {
      this.anim.destroy();
    }

    this.anim = this.props.lottie.loadAnimation({
      container: this.animationDOMNode,
      animationData: props.source,
      renderer: 'svg',
      loop: props.loop || false,
      autoplay: props.autoPlay,
      rendererSettings: props.rendererSettings || {},
    });

    if (props.onAnimationFinish) {
      this.anim.addEventListener('complete', props.onAnimationFinish);
    }
  };

  setAnimationDOMNode = (ref) => (this.animationDOMNode = ReactDOM.findDOMNode(ref));

  play = (...frames) => {
    if (!this.anim) {
      return;
    }

    this.anim.playSegments(frames, true);
  };

  reset = () => {
    if (!this.anim) {
      return;
    }

    this.anim.stop();
  };

  render() {
    return <View style={this.props.style} ref={this.setAnimationDOMNode} />;
  }
}