Ant Design Component Customization and Bundle Optimization
![](https://webcf.waybackmachine.org/web/20210118203515im_/https://habrastorage.org/getpro/habr/upload_files/e90/ae5/0ee/e90ae50ee7be7bffe3c8f6b6f01da994.jpg)
I'm Ivan Kopenkov, a senior front-end developer at Mail.ru Cloud Solutions. In this article, I will tell you about the approaches we have used for the UI library components customization. You will also learn how to significantly decrease bundle size, cutting off all the unnecessary modules Ant Design takes there.
In our case, we are making wrappers for original Ant Design components inside the project, changing their appearance, and developing their logic. At the same time, we import both customized and original components right from the ant-design module. That saves tree shaking functionality and makes complex library components use our wrappers instead of original nested elements.
If you are already or about to use Ant Design, this article will provide you with a better and more effective way to do so. Even if you have chosen another UI library, you might be able to implement these ideas.