code4romania / taskforce-fe-components

reusable frontend components for taskforce projects
https://taskforce-fe-components.now.sh
Mozilla Public License 2.0
11 stars 34 forks source link

Bundle components properly for tree-shaking. #180

Closed Utwo closed 4 years ago

Utwo commented 4 years ago

In the current version this component library together with all the dependencies (echarts, react-datepicker, uderscore, date-fns) is not tree-shakable. So every consumer app that is importing a single button from this library will end up with all the components and dependencies from fe-components in consumer app bundle.

In diaspora-hub and ce-ma-fac application, the bundle looks something like this. Even though they don't use components with echarts or datepicker, we can see that they are included in final build and loaded on every request.

ce-ma-fac image1

diaspora-hub image

tudorgergely commented 4 years ago

I think we should export the components separately so you can import them directly (e.g. import Button from 'taskforce-fe-components/Button').

If we do it this way we can also import the css the same way import 'taskforce-fe-components/Button.css'.

This will require a change in the respective projects but will work better compared to letting the bundler decide what to tree shake (also not possible sometimes because of 3rd party libraries). We can also keep the existing imports as well so we don't break existing apps using them.

What do you think @Utwo ?

LE: saw now in your PR that you're doing something along those lines