Ant Design component customization
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.
Problems with using UI libraries
UI libraries provide developers with a variety of ready-to-use components that are commonly required in any project. Usually, such components are covered with tests, and they support the most common use cases.
If you’re going to use one of these libraries, you should be ready to face the next two problems:
- Surely, every project requires UI components to be modified. The components must match the project design. Moreover, it’s often needed to develop or change some components’ logic for particular use cases.
- The majority of UI libraries include more components, icons, and utilities than will be used in one project, at least in its early stages. But all these files might be put into the bundle, which can dramatically increase the initial loading time for your app.
The first issue is solved by the customization of library components, and the second is tackled by bundle optimization. Some libraries, including Ant Design, are already adapted for tree shaking, which lets the bundler automatically exclude unused modules from the bundle.
However, even if you use Ant Design, built-in tree shaking support will be not enough to achieve effective bundle size. All the icons of this library will be included in the bundle, as well as the entire Moment.js library with every localization file since it is a dependency for some Ant components. Moreover, if some of the Ant components are re-exported in one file, each of them will be added to the bundle. Even if only one of them is used.
