Búsqueda de sitios web

angular - Treeshaking de Webpack con exportación de variables const


Nuestra configuración:
- Angular 5.2.x
- Ionic 4.4.x.
- Webpack 3.6.x

Tenemos una estructura de aplicación como esta:

app
  |__features
  |    |__Feature1
  |    |     |__Feature1Service.ts
  |    |     |__Feature1Dto.ts
  |    |     |__index.ts
  |    |
  |    |__Feature2
  |          |__Feature2Service.ts
  |          |__Feature2Dto.ts
  |          |__index.ts
  |
  |__core
       |__SomeCoreStuff.ts
       |__index.ts

En los archivos de índice exportamos todo lo que se necesita fuera de la función actual de esta manera:

import { Feature1Service } from './Feature1Service';
import { Feature1Dto } from './Feature1Dto';
export const fromFeature1 = { Feature1Service, Feature1Dto };

y el uso entonces se ve así, por ejemplo, en Feature2:

import { fromFeature1 } from '../Feature1';

//use Feature1Service but not Feature1Dto
fromFeature1.Feature1Service;

En este caso, solo se utiliza una propiedad en const fromFeature1.

Nuestra pregunta es si el treeshaking de webpack elimina la exportación no utilizada (Feature1Dto en este caso). Si no, ¿cuánto aumenta eso nuestro paquete js desplegado?

Respuesta #1

fromFeature1.Feature1Service es una propiedad del objeto fromFeature1. No es una exportación y no puede ser eliminada por tree-shaking si fromFeature1 está en uso.

Para usar tree shaking, debería ser:

export { Feature1Service } from './Feature1Service';
export { Feature1Dto } from './Feature1Dto';

Artículos relacionados