Bundle size

[fostimus]

Can someone explain to me the tradeoffs between dotLottie and using json files?

The react player package for dot Lottie files is 2MB... Seems incredibly heavy to send to the browser vs. importing the JSON player and JSON files.

[theashraf]

@fostimus
while the total unpacked size of the dotlottie player is around 2MB, the minified bundle size is actually just about 105KB. Remember that not all the files from the 2MB are going to be loaded into your bundle. Instead, only the relevant chunks will be included, based on the specific features of the dotlottie player you utilize.

For a better understanding, you can review the bundle sizes on https://bundlephobia.com/package/@dotlottie/react-player@1.6.1 or even test the package out yourself. Hope this helps! :)

Additionally, you can check out the dotlottie playground and inspect the bundle size of the player directly from the network tab in your browser's developer tools.

[xyhxx]

But bundle not only dotlottie, also have lottie_worker, lottie_canvas, lottie_html, lottie_svg...

example:

vite build(manualChunks):

build: { rollupOptions: { output: { manualChunks: { dotlottie: ["@dotlottie/react-player"] } } } }

webpack build(splitChunk):

lottie: { name: 'lottie', chunks: 'all', test: /[\\/]node_modules[\\/](@dotlottie)/, priority: 10, reuseExistingChunk: true, },

[theashraf]

@xyhxx, please note that only one module will be lazy-loaded based on the renderer type that your DotLottiePlayer uses. Not all of the modules will be part of your main bundle.

For a more precise bundle size measurement, consider using tools such as size-limit or bundlephobia

[GoodluckH]

I face the same issue. I deploy on Cloudflare Pages and it seems like the bundle-size not being reduced during the build. CF has a 2mb limit, so the deployment would fail.

[Conor-TS]

I'm seeing the same issue - using @dotlottie/react-player has a really heavy impact on our bundle size.

[qugh]

the same. it adds ~500kb gzipped

[theashraf]

This dotLottie player is built on top of lottie-web, which has a bundle size of approximately 500KB 😞. But recently, we launched a new dotLottie player (dotlottie-web), based on the ThorVG vector graphics renderer. This new player offers a better JS bundle size, and consistent rendering across different platforms(Mobile & Web), thanks to ThorVG's portability.

If the bundle size is a major concern for you, I recommend trying out dotlottie-web. The new dotLottie player's size is roughly 14KB gzipped, but it requires an extra HTTP request for loading the core dotLottie rust player WASM bindings from npm CDN.

For more insights into dotlottie-web and to determine if it suits your needs, you may find this blog post and codepen examples helpful:

• https://lottiefiles.com/blog/working-with-lottie-animations/new-dotlottie-web-player
• https://codepen.io/collection/rxPaBN
• https://codepen.io/collection/xKkVEQ