如何对带有 Typescript 和 Webpack 的类使用 tree-shaking？答案

【问题标题】：How to use tree-shaking for classes with Typescript and Webpack?如何对带有 Typescript 和 Webpack 的类使用 tree-shaking？
【发布时间】：2016-12-28 03:35:02
【问题描述】：

我在 file car.ts 中有一个名为 Car 的类，在另一个 file engine.ts 中有两个用于引擎的类。

汽车.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());

car.ts 文件仅导入 V8Engine 类，但 V6Engine 类即使在缩小文件中也会出现。我从 engine.ts 导出的未使用函数被剥离。

在没有 UglifyJS 插件的情况下运行 Webpack 时，V6Engine 类按预期标记为/* unused harmony export V6Engine */。但添加插件后，我从 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]

我有created a repository 可以重现问题。克隆、安装和运行 npm run webpack 和 npm run webpack-prod 会重现该问题。

不知道这是否是 Typescript 转译、UglifyJS 或这些工具的编排的错误。我正在使用带有 es2015 模块和 Webpack 2.1.0-beta.21 的 Typescript 2.0-dev。

【问题讨论】：

我在 webpack 存储库中看到了您报告的问题，看起来这是正确的方法，但由于 UglifyJs2 错误而不会摇树。
用仓库中的 Babili 解决了。

标签： typescript ecmascript-6 webpack

【解决方案1】：

关键是输出ES2015模块和代码，然后在上面运行Babili minifier。它可以正确地摇树。

【讨论】：