Let me tell you a story. I once worked on a project where we needed to create a calendar component for a UI library used in a web application for a financial organization. The calendar component required for the end-user to be able to easily select a start and end date in a calendar overlay shown on the screen after mouse click activation. The calendar overlay would then capture the users’ mouse clicks to determine the selected day for the beginning and end dates. We decided to leverage the Moment.js library to manage dates within the calendar component. When we packaged the UI Library, we included every single component and style that got implemented. In addition, all third party libraries, like Moment.js, also got included in the compressed package that was consumed by downstream web applications.
Other team members started reporting that the apps being created using the UI library is not performant and taking way too much time to load. After researching the issues, we determined that the problem was our library. It was too big. The components were not broken up into independent modules. Whenever a single component got pulled into the application, even something as simple as a dropdown component, ALL the library components plus dependencies got pulled and built into the developed web application. Our library added too much weight and was causing the application to take a long time to render on start.
In summary, keep your UI libraries as lean and modular as possible. Think of the modularity of your UI library not only from the perspective of the components but also in how the code is consumed. Build your UI library components as separate modules and avoid adding complexity to projects that consume your awesome toolkit.