移除基于 Environment Nx Angular 的代码块

Question

我真的很想根据环境在我的 Angular 应用程序中插入或删除代码块。 特别删除某些不应用于生产的导入声明和相关代码，以保持包的轻量，同时在开发环境中获得额外代码的好处。 我知道 webpack 可以处理代码转换，所以我想知道是否有任何解决方案可以基于特殊语法删除代码块？

例如

// Special Import handled by Webpack
import { logger } from '@loggerzMaximus/core' in 'development'; // 1GB!!

export class AppComponent {

    ngOnInit() {

        // Should be stripped by webpack + import if env is not development
        logger.log('LoggerzMaximus works for dev!');

    }
  
}

从这个答案我已经看到 webpack 4 可以自动处理node的 if 语句

• https://stackoverflow.com/a/52062307/3859456
• 另一篇文章： https : //newbedev.com/remove-some-code-lines-in-production-distribution-files 。

——

if (process.env.NODE_ENV === 'development') {
    if(info instanceof LogModel)
        throw new Error("not a instance of LogModel");
}

有谁知道一种根据环境剥离代码的方法？

Answer 1

Angular 在使用--prod标志时利用常春藤编译器的树摇动你的构建，这样你就可以使用environment.ts来检查你的环境，然后任何在生产模式下运行时未使用的代码都将被保留通过 Angular 编译从你的包中删除。

NX 实际上还进行了超出这个简单解释的其他优化。

这里简单介绍一下treeshaking，以帮助澄清： Angular treeshaking indepth