删除基于 Environment Nx Angular 的代码块答案

【问题标题】：Remove Code blocks based on Environment Nx Angular删除基于 Environment Nx Angular 的代码块
【发布时间】：2021-09-29 08:31:34
【问题描述】：

我对根据环境在我的 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 语句

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

有人知道根据环境剥离代码的方法吗？

【问题讨论】：

标签： angular typescript webpack webpack-4 nrwl-nx

【解决方案1】：

Angular 在使用 --prod 标志的同时使用 Ivy 编译器对您的构建进行摇树，因此您可以使用 environment.ts 检查您的环境，然后检查在生产模式下运行时未使用的任何代码Angular 编译会将你的包排除在外。

NX 实际上在这个简单的解释之外还做了额外的优化。

这里简要介绍一下 tree shaking 以帮助澄清：Angular tree shaking in-depth

【讨论】：