使用isDevMode的条件不会被树动

问题描述

我当前的代码是：

@Directive({
  selector: 'some-selector',})
export class SomeSelectorDirective {
  constructor() {
    if (isDevMode() && someCondition) {
      console.warn('Some warning.');
    }

    // some omitted code
  }
}

问题在于，当我运行ng build --prod时，这种情况并没有被树震动，但是如果我将isDevMode()替换为!environment.production，则会删除代码。我想知道一个原因：为什么isDevMode包装的代码没有被丢弃在构建产品上？

---

请注意，我正在使用Angular 10.x.y。

解决方法

这是因为优化器（Terser.js）并未应用该函数来检查其运行时值。

使用内联版本时，webpack的DefinePlugin会将内联替换为其自身的值，因此在优化之前，它看起来像：

@Directive({
  selector: 'some-selector',})
export class SomeSelectorDirective {
  constructor() {
    if (false && someCondition) {
    // ---^ inlined the false value
      console.warn('Some warning.');
    }

    // some omitted code
  }
}

使用此代码，优化器可以肯定地删除if，因为它是一个“死”分支。