I guest this uestion hs been ask a millions times before, buit i can't find an valid answer...
Context: We are working on an angular 4.3 App (using Typescript and Webpack) and are planing to upgrad to angular 6 soon.
The Problem: We have a (generated) Set of Models (Interfaces) those are use al over our codebase. Those are exported from one File
models/models.ts
export * from './account';
export * from './user';
....
In an Component or Service we can use them in three ways
1. direct import:
import {Account} from 'models/account'
...
this.account: Account;
2. import via models.ts:
import {Account} from 'models/models'
...
this.account: Account;
3. wildcard import:
import * as models from 'rest/model/models';
...
this.account: models.Account;
We like the 3rd option the most, because it's easy readable and keeps the import clean. But we are not sure if this will affect our bundle size and build time. As every Model is "included" in every component.
See: https://github.com/webpack/webpack/tree/master/examples/harmony-unused vs. https://gist.github.com/sokra/27b24881210b56bbaff7#es6-specific-optimizations
Whats the best pratices here?