ecmascript 6 - Hvordan bruger man tree-shaking for klasser med Typescript og Webpack?

Jeg har en klasse kaldet Car i filen car.ts og to andre klasser for motorerne i en anden fil engine.ts.

bil.ts

import { V8Engine, Engine } from './engine';

class SportsCar {
  constructor(private engine: Engine) {}

  toString() {
    return this.engine.toString() + ' Sports Car';
  }
}

engine.ts

export interface Engine {
  toString(): string;
}

export class V6Engine implements Engine {
  toString() {
    return 'V6';
  }
}

export class V8Engine implements Engine {
  toString() {
    return 'V8';
  }
}

export function getVersion() {
  return '1.0';
}

console.log(new SportsCar(new V8Engine()).toString());

Filen car.ts importerer kun klassen V8Engine, men klassen V6Engine vises også i den minificerede fil. Den ubrugte funktion, jeg eksporterer fra engine.ts, bliver fjernet.

Når man kører Webpack uden UglifyJS-plugin, bliver V6Engine-klassen markeret med /* unused harmony export V6Engine */ som forventet. Men efter at have tilføjet pluginet får jeg denne advarselsbesked fra UglifyJS:

WARNING in car.prod.bundle.js from UglifyJs
Dropping unused function getVersion [car.prod.bundle.js:89,9]
Side effects in initialization of unused variable V6Engine [car.prod.bundle.js:73,132]

Jeg har oprettet et repository, hvor problemet kan reproduceres. Kloning, installation og kørsel af npm run webpack og npm run webpack-prod reproducerer problemet.

Ved ikke, om dette er en fejl med Typescript-transpileringen, UglifyJS eller orkestreringen af disse værktøjer. Jeg bruger Typescript 2.0-dev med es2015-moduler og Webpack 2.1.0-beta.21.

Svar #1

Nøglen er at outputte ES2015-moduler og kode og derefter køre Babili-minifieren på det. Den laver tree-shaking korrekt.