Ant Design or Elephant Design?
An analysis of the React component library
Ever since I started using React, I always used some third party libraries with it.
I remember when I was learning React, I was using it inside a large old Laravel project, trying to finish a task for over 2 days, which would otherwise take only few hours to finish if I wasn’t using React; but that’s okay, I was just learning and training 😅
In those days, I never thought about of a bundle size, because the template that we were using had lots of JavaScript and CSS files (nearly 2 MB), so my simple React bundle wouldn’t make much difference.
But when we started to build new projects with just React, it started to become obvious how slow was the application. Because my whole application was JavaScript (lots of JavaScript to be precise) and if JavaScript loads slow, then the whole application is loading slow. And I am going to explain the reason of that large bundle size.
Discovering Ant Design
Back then when we were looking for a suitable and rich React component library, the only library that satisfied us was the Ant Design. It is really beautiful, neat and very rich React component library; it has a good UX and it has everything we needed to build our applications.
However, after writing few pages, we realized that bundle size is getting larger and larger that even code splitting didn’t help. And we didn’t have any images or videos that affected the initial page load. Ant Design with basic setup makes your bundle size nearly 1.5 MB (without gzip). And they say that Ant Design by default supports Tree Shaking. But even with Tree Shaking and code splitting it was (and still is) quite a large bundle that we’re shipping to the production.
Talk is cheap, so let me show you a little demo how adding single button from Ant Design affects your bundle size.
Create-react-app starter app
Just to show you how much the difference will be, let’s first take a look at what is the initial bundle size of the app that was created with create-react-app. I will not use source-map-explorer, I will just demonstrate it with Chrome DevTools.
As you see from the picture all transferred resources (including initial CSS and React logo coming with create-react-app) just only takes 128 KB. And the largest file here is main chunk (which probably is React’s codes) which is just 116 KB. So, what makes this tiny bundle so large that it is over 1 MB? Let’s see that too.
Ant Design with basic setup
Let’s install Ant Design with instructions given in the documentation. With very basic (and lazy) setup, we install antd package with our package manager and include whole Ant Design CSS files (yeah, all of them 😎) in our App.css file. Then we add single primary button to our App.js file. Look what happens to our build files:
As you can see from the picture, we’re shipping more than 1 MB of resources now. If we skip the fact that we imported all CSS files of Ant Design which makes us to ship 500 KB more style sheets, our main JavaScrtipt chunk also has grown from 116 KB to 674 KB.
I mean, we’re talking about big open source React component library which has nearly 1K contributors and more than 49K stars, aren’t they aware of this problem?
They are, indeed, and in their documentation they talk about this issue, a little bit:
We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo. For instance, we actually import all styles of components in the project which may be a network performance issue.
And they provide advanced guideline to use modular imports; which simply, means that we ship only styles of components that we’re using, not all of them.
Using Ant Design advanced guides
Let’s take a look at their advanced guides and do what they ask. I won’t go into details of how to do it, they explain it very well in the documentation. What they do, is to simply customize create-react-app with some of packages and write overrides to webpack config without running eject .
They fix babel imports so that when we import let’s say a button, then CSS files associated with that button will also be imported and we won’t have to import all CSS files in App.css .
After doing this setup, let’s have a look how it affected to our bundle size:
We’re shipping 400KB less stylesheets and now we know that this button has 74KB of styles but our Javascript chunk is still 674 KB 😄
This is very large for a simple button, right? And how do we fix this?
I really, don’t know how to fix this; Maybe we should avoid using it or maybe they release something called And Design Lite 💭 I’ve looked into source code and saw that button component also exports button group component; furthermore, button.tsx file has 318 lines of code inside and utilizes several external and internal dependencies.
Conclusion
Using lots of npm packages helps us to develop our application much faster but it has a risk of making our users to hate the app.
If anyone knows a better — rich but with small bundle size — React component library then, please, let me know. Or do you think it’s better to build one of our own? 😏
Thanks for reading and if you find something wrong with this article do not hesitate to write in comments.
