In a large typescript react app with webpack we have a common module with a bunch of utilities, classes, types etc. This module is set up with an index file that re-exports all the individual modules. Like so
export * from './a';
export * from './b';
export * from './c';
...
Some of these individual modules a also use a similar index file to re-export stuff, so the export tree is several layers deep. It probably involves thousands of exported items.
The issue is that when a simple function is imported from this common ui module it evaluates ALL the individual modules as well. Some of these individual modules for example have exports with expensive constructors export const classA = new ClassA().
This common module is deeply ingrained through multiple apps that are quite large (think hundreds of thousands lines of code). Each individual file in our apps maybe imports at most 3 or 4 items from this common module.
Is there a way to clean this up so it is less wasteful without refactoring all the applications? Preferably without having to update all our individual import statements throughout all applications.