6

我正在使用 Angular 9，我有一些这样的代码：

(features.ts, autogenerated:)
// AUTO-GENERTATED FILE. DO NOT EDIT!
export const Features = {
  // Whether to reveal our Secret New Feature to the world
  ENABLE_SECRET_FEATURE: 1
};

(mycode.ts, app code)
import { Features } from 'generated/features.ts';

function doSomething() {
  if (Features.ENABLE_SECRET_FEATURE) {
    doAIBlockChainARThing();
  } else {
    doSomeBoringOldCRUDThing();
  }
}

我希望发出的代码是

function doSomething() {
    doAIBlockChainARThing();
}

或者

function doSomething() {
    doSomeBoringOldCRUDThing();
}

但不是两者兼而有之。

是否有调用ng build会发生这种情况？我知道 uglify 可以做到这一点，而 Closure Compiler 肯定可以。我当前的调用是：ng build --aot=true --stats-json --buildOptimizer=true --optimization=true --prod

经过一些实验后，我发现 Angular prod builds 中的简洁设置可以满足我的要求，如果我有如下代码：

const SECRET_FEATURE = true;
if (SECRET_FEATURE) {
  // code here is emitted
} else {
  // code here is NOT emitted
}

但是，如果我尝试做类似的事情：

import {SECRET_FEATURE} from 'my-features';

if (SECRET_FEATURE) { // this conditional is emitted
  // this code is emitted
} else {
  // this code is also emitted
}

我的想法是我必须使用类似https://www.npmjs.com/package/tsickle的东西来更好地消除死代码，并使用自定义 WebPack 配置来调用它。我希望有一条更加以 Angular 为中心的路径，这样我就不必为未来的工程师创建/记录很多自定义机器。

4

3 回答 3

2

我刚刚尝试了一个新的 Angular 9 项目构建ng build --prod

使用以下代码，在组件的类中

import { Features } from 'generated/features.ts';

doSomething() {
  if (Features.ENABLE_SECRET_FEATURE) {
    console.log('AAAA');
  } else {
    console.log('BBBB')();
  }
}

编译后的代码是你所期望的（else部分没有发出）

doSomething() {console.log('AAAA');}

如果你有其他方法调用你 if/else，这有点不同

例如，使用下面的代码

import { Features } from 'generated/features.ts';

   doSomething() {
    if (Features.ENABLE_SECRET_FEATURE) {
      this.doAIBlockChainARThing();
    } else {
      this.doSomeBoringOldCRUDThing();
    }
  }

  private doAIBlockChainARThing()
  {
    console.log('AAAAAAAAA');
  }

  private doSomeBoringOldCRUDThing()
  {
    console.log('BBBBB');
  }

编译后的代码是

doSomething(){this.doAIBlockChainARThing()}
doAIBlockChainARThing(){console.log("AAAAAAAAA")}
doSomeBoringOldCRUDThing(){console.log("BBBBB")}}

所以该else部分不会生成，但未使用的私有方法也不会被 terser 删除。

您可以if在特定方法中再次使用您的测试，完全没有生成密码，但这不是很方便

  private doAIBlockChainARThing()
  {
    if (Features.ENABLE_SECRET_FEATURE)
    console.log('AAAAAAAAA');
  }
于 2020-03-05T10:34:40.050 回答
1

对于构建特定的更改，您应该使用 Angular.json 文件替换。

有关生产模式，请参阅相关答案@ngrx/store-devtools

于 2020-03-04T08:23:46.343 回答
0

您可以将您的功能集中在 Angular 9 的延迟加载组件（ivy）中，并为它们提供一个 webpackChunkName 以匹配并从您的构建文件中删除（如果您真的希望它是非常秘密的功能）。然后使用您的功能标志来防止以一种或另一种方式延迟加载。例如，请参阅https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a。

于 2020-03-09T22:40:41.373 回答