angular - Prestanda för wildcard-importer med TypeScript och Webpack


Jag gissar att denna fråga har ställts miljontals gånger tidigare, men jag kan inte hitta ett giltigt svar...

Kontext: Vi arbetar med en Angular 4.3-app (använder TypeScript och Webpack) och planerar att uppgradera till Angular 6 snart.

Problemet: Vi har en (genererad) uppsättning modeller (gränssnitt) som används över hela vår kodbas. Dessa exporteras från en fil

models/models.ts

export * from './account';
export * from './user';
....

I en komponent eller tjänst kan vi använda dem på tre sätt

1. direktimport:

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;

Vi gillar det tredje alternativet mest, eftersom det är lättläst och håller importen ren. Men vi är inte säkra på om detta kommer att påverka vår bundelstorlek och byggtid. Eftersom varje modell är "inkluderad" i varje komponent.

Se: https://github.com/webpack/webpack/tree/master/examples/harmony-unused vs. https://gist.github.com/sokra/27b24881210b56bbaff7#es6-specific-optimizations

Vilka är de bästa metoderna här?

Relaterade artiklar