bigbinary
Improve bundle size with tree shaking and component-scoped CSS
Currently, neetoUI includes all components in a single bundle, regardless of which components are actually used in a project. This leads to larger bundle sizes, impacting application performance. Additionally, all CSS styles are included in a single file, further increasing the initial load size.
Ref - https://github.com/bigbinary/neeto-record-web/issues/999
Proposed Improvements
1. Implement Tree Shaking
Utilize tree-shaking techniques to remove unused components from the final bundle.
2. Component-Scoped CSS
Break down the current single CSS file into individual files for each component. During import, only the necessary CSS file associated with the used component should be loaded. This reduces the initial load size and improves performance.
Benefits
- Smaller bundle size leads to faster loading times for applications using neetoUI.
- More efficient codebase.
cc @neerajsingh0101 @josephmathew900 @ajmaln @farhanlatheef Please LMK your views.
neetoUI bundle size for neetoRecord public page. (Currently the public page uses only Button, Typography, Tooltip and Slider components from neetoUI.)
Since neetoUI has a dependency on antd, it also brings in an additional 900kb
@praveen-murali-ind This is lot of work. I think its better we do a POC first before we apply changes to all components.
Lets also add support for path import just like in neeto-molecules which improves tree shaking. for example.
import Button from 'neetoui/Button';
cc: @josephmathew900 @ajmaln
@farhanlatheef _a As discussed, please work on the POC. Once your changes are completed, you can assign the PR to me for the CSS work.
cc @neerajsingh0101
@praveen-murali-ind _a I have completed support for path import. You can start the CSS work. cc: @josephmathew900 @ajmaln
@farhanlatheef _a As discussed, please work on the component level CSS imports. Let’s do it for Button component for now.
@farhanlatheef Has implemented the tree shaking in neetoUI.
Regarding the component-scoped CSS, we found some edge cases.
-
neetoUI provides helper classes for managing the text color, background color, border color, flex, text alignment etc. Since the styles are clubbed with the component in this approach, if a page is not using any neetoUI components, these utility classes won’t work. We are using these classes everywhere in neeto products.
-
Some of the neetoUI component classes are being used in host applications to reuse the neetoUI styles. In the new approach, reusing the component classes won’t work if the neetoUI component is not being used on that page.
I had a discussion with @josephmathew900 and @AbhayVAshokan regarding these issues. We will check the feasibility of purging the unused CSS instead of the component-scoped CSS approach. Will do a separate POC for purging CSS for more optimisations.
Closing this issue for now.