くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Lottie > lottie_lightでバンドルサイズを削減する

lottie_lightでバンドルサイズを削減する

Lottie Nuxt.js

一部のアニメーションでLottieを使っているけど、
軽量版があるっぽいので試してみた(*´ω｀*)

もとのコンポーネントはこの記事のやつ。

www.memory-lovers.blog

軽量版を利用したコンポーネント

  <template>
    <div :style="style" ref="LottieView" />
  </template>

  <script lang="ts">
-  import lottie, { AnimationItem } from "lottie-web";
+  import { AnimationItem } from "lottie-web";
+ import { default as lottie } from 'lottie-web/build/player/lottie_light';
  import { Component, Prop, Vue } from "nuxt-property-decorator";

  @Component
  export default class LottieView extends Vue {
  // ...略
  }
  </script>

軽量版は、SVGレンダラーのみ対応しているバージョンのよう。
サイズが半分くらいになるので、こっちを使うのが良さそう(*´ω｀*)

参考にしたサイト様