Analyzing Size of React Bundle with Lottie.js

Index

  • Project and package.json
  • Lottie-web for rendering JSON animation
  • Analyze my bundle size by webpack-bundle-analyzer
  • Bundle size before and after using Lottie

Project and package.json

My project use gzip to compress my cra bundle size.

And this is my dependencies in package.json.

Lottie-web for redering JSON animation

I need lottie-web for json animation file about loading indicator. When designer makes animation used After Effect, The output of it is json. To render it in html, I had to use lottie-web.

import { useCallback, useEffect } from 'react';import Lottie from 'lottie-web';import loadingAnimationData from 'src/animation/loading-wh.json';import Atoms from 'components/Atoms';const Loading = () => {  const containerRef = useCallback((node) => {    if (node !== null) {      Lottie.loadAnimation({        container: node,        animationData: loadingAnimationData,        renderer: 'svg',        loop: true,        autoplay: true,        name: 'Loading',      });    }  }, []);  
useEffect(() => {
return () => { Lottie.destroy(); }; }, []); return <Atoms.Span ref={containerRef} />;};export default Loading;

This is Loading component. In second line import Lottie from ‘lottie-web’; , I import Lottie from dependency lottie-web. I was wonder how much this will increase the bundle size.

Analyze my bundle size by webpack-bundle-analyzer

So, I verify my bundle size with webpack-bundle-analyzer. I add code below in craco.config.js to edit webpack config.

webpack: {  plugins: {    add: [      new PreactRefreshPlugin(),      new BundleAnalyzerPlugin({        analyzerMode: 'static',        reportFilename: 'docs/size_dev.html',        defaultSizes: 'parsed',        openAnalyzer: true,        generateStatsFile: true,        statsFilename: 'docs/stats_dev.json',      }),    ],
},
},

yarn build after editing it. Then, I got this image.

In Loading component, I imported Lottie from lottie-web dependency. So, lottie.js is in bundle and size of it is about half of whole bundle size of node_modules(Gzipped size 133kb).

If I don’t use lottie.js, How big is the bundle size?
For checking it, I commented out this code in my loading component.

Lottie.loadAnimation({  container: node,  animationData: loadingAnimationData,  renderer: 'svg',  loop: true,  autoplay: true,  name: 'Loading',});

And yarn build again. Then, I got another image.

I was able to see that lottie.js is gone and the bundle size was reduced to 69kb. I could guess that lottie.js size is 64kb(133kb — 69kb)

And that’s it. Maybe we could find another way to compress bundle size to reduce rendering time. But before it, we have to check how big the bundle size is First.

--

--

--

https://bit.ly/David_YouTube

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Vuetify Margin and Padding: How to Use Vuetify Spacing Classes

Displaying Dynamic Data in Grid Format in ReactJS

Reverse String — JS

React Hooks: Concept of Virtualisation!

Lesson 14: Router (Programmatic navigation)

How to make your NodeJS dynamic application or API secure

Async JS Patterns using Promises

Choosing Package Managers: Yarn vs NPM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Boaz Hwang

Boaz Hwang

https://bit.ly/David_YouTube

More from Medium

Multi-threading in JS, and what you can do with it!

Prototype A React App with Firebase Authentication Quickly

Mariam — Front-End React Developer

React Stateful vs Stateless Components