条件环境变量摇树

Question

目前我正在尝试根据环境变量删除未使用的代码。在下面的代码中，当我运行 ng build --prod 并在 environment.prod.ts 中设置 evironment.showDevTools = false 时，我希望 console.log 不会包含在最终构建文件中，但不幸的是这是。我做错了什么？

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

if (environment.showDevTools) {
  console.log('showing dev-tools');
}

@Component({
  selector: 'app-component',
  templateUrl: './app.html',
  styleUrls: ['app.scss']
})
export class AppComponent {

}

main.js的一部分

,ut=n("AytR");ut.a.showDevTools&&console.log("showing dev-tools");var st=function(){

Answer 1

我必须向 package.json 添加一个名为 "sideEffects": false 的字段。所以它目前看起来像这样：

{
  "name": "myApp",
  "version": "1.0.0",
  "sideEffects": false,
  "scripts": {
    "ng": "ng",
    "test": "ng test",
    ...
  },
}

参考文献：https://webpack.js.org/guides/tree-shaking/, https://github.com/stereobooster/package.json#sideeffects

条件环境变量摇树

Conditional environment variables tree-shaking

javascript

typescript

tree-shaking

angular