页面性能优化之动画文件

108 阅读1分钟

image.png 相比 GIF/Lottie JSON dotLottie 文件体积小太大了。

dotLottie 文件需要使用什么加载呢 ?

答:@lottiefiles/dotlottie-web

import { DotLottie } from '@lottiefiles/dotlottie-web';
const dotLottie = new DotLottie({
    autoplay: true,
    loop: true,
    canvas: document.querySelector('#dotlottie-canvas'),
    src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie",
});

在实际运用中,发现 会加载 1M 多的 dotlottie-player.wasm,这样一算也没有优化多少 so 到头来空优化一场

经过我努力查找资料。。。

image.png 发现 0.50.1 版本setWasmUrl这个Api 还能起作用

import { DotLottie } from '@lottiefiles/dotlottie-web';
DotLottie.setWasmUrl(new URL('/dotlottie-player.wasm', import.meta.url).href)

至此速度超快,动画播放也很流畅。功成。提交代码收工

[issue](Unable to Set Local .wasm File in Latest Version · Issue #557 · LottieFiles/dotlottie-web)

[官网](Getting started with dotLottie)