I am able to render without errors in frontend, using npm run dev.

I am able to render without errors in frontend, using npm run dev.

I am able to render without errors in frontend, using npm run dev.

I’m currently using Vite to build my React app. I use react-comment-section

My phase of production is currenly at pentest, which I need to pass every test, even it’s low. There’s a pentest that says

I am trying to configure a React + Vite application such that the frontend is able to talk to a backend webserver which is running on the same host at port 5555.

I have an idea to use the same set of dependencies for remote components and the application’s own components. The scenario is as follows:

I am trying to build my app via npm run build.

I’m cereating a design system aka component library with react typescript and vite as build tool
I had an issue that whenever I Import any component it was importing all the package not only the componeent, it was an issue related to the tree-shaking and I fixed it.
Now I have two issue which are:
1- I have about 200 Icons that I’m using them through an Icon component, and I’m using those icons as a react components, when I build I found that all Icon built with it which take big size from the bundle:
2- When import any components that depends on the Icon component or other dependency I found it takes big size, for example when I import Button component it takes (400k gzipped: 187.8k) which is big, and it is like that because it depends on Icon component, this is example of the Button component:

An example of what I want to do:
Before:
enter image description here