Our tech stack includes:
- Angular 5.2.x
- Ionic 4.4.x
- Webpack 3.6.x
We have organized our app structure as follows:
app
|__features
| |__Feature1
| | |__Feature1Service.ts
| | |__Feature1Dto.ts
| | |__index.ts
| |
| |__Feature2
| |__Feature2Service.ts
| |__Feature2Dto.ts
| |__index.ts
|
|__core
|__SomeCoreStuff.ts
|__index.ts
In index files, we export the necessary elements from each feature like this:
import { Feature1Service } from './Feature1Service';
import { Feature1Dto } from './Feature1Dto';
export const fromFeature1 = { Feature1Service, Feature1Dto };
This allows us to utilize only the required modules in other features, such as in Feature2:
import { fromFeature1 } from '../Feature1';
//using Feature1Service without using Feature1Dto
fromFeature1.Feature1Service;
We are curious if webpack's tree shaking eliminates unused exports (e.g., Feature1Dto). If not, how much does it affect the size of our deployed JavaScript bundle?