Angular 5+生产构建中排除指定组件的技术实现咨询

嘿，我完全懂你想要的效果——不是运行时隐藏组件，而是让它们的代码根本不进入生产构建包，连那些*ngIf的冗余判断都不想留对吧？刚好在Angular 5+里有几种靠谱的方案能实现这个，我给你拆解清楚：

一、用Angular CLI的fileReplacements做文件替换（最直观） #

这种方式相当于给开发和生产环境准备两份模块文件，构建时自动切换，彻底隔离不需要的代码。

• 第一步：准备两份模块文件
  比如你原来的app.module.ts是给开发环境用的，里面包含了要排除的组件/模块导入和声明；再新建一个app.module.prod.ts，把所有和目标组件相关的代码全删掉，只保留生产需要的内容。

• 第二步：修改angular.json配置
  在生产构建的配置块里添加文件替换规则：

  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/app/app.module.ts",
          "with": "src/app/app.module.prod.ts"
        }
      ],
      // 你的其他生产配置比如压缩、混淆之类的...
    }
  }
  

  之后执行ng build --prod的时候，CLI会自动用生产版的模块文件替换开发版，那些要排除的组件代码根本不会被打包进去。

二、TypeScript条件编译（更灵活的细粒度控制） #

如果不想维护两份模块文件，用TS的条件编译可以在同一个文件里实现代码的按需剔除。

• 第一步：在环境文件里加标识
  打开src/environments下的两个环境文件：

  • environment.ts（开发环境）：

    export const environment = {
      production: false,
      allowDevComponents: true
    };
    

  • environment.prod.ts（生产环境）：

    export const environment = {
      production: true,
      allowDevComponents: false
    };
    

• 第二步：给TS编译器加编译定义
  修改tsconfig.json的compilerOptions，把环境变量注入到编译过程中：

  "compilerOptions": {
    // 你的其他配置...
    "define": {
      "ALLOW_DEV_COMPONENTS": "${environment.allowDevComponents}"
    }
  }
  

• 第三步：在模块里写条件代码
  现在就可以在app.module.ts里用条件编译块来控制组件的导入和声明了：

  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { AppComponent } from './app.component';
  
  // 只在开发环境导入目标组件
  #if ALLOW_DEV_COMPONENTS
  import { DevOnlyComponent } from './dev-only/dev-only.component';
  import { DevToolsModule } from './dev-tools/dev-tools.module';
  #endif
  
  @NgModule({
    declarations: [
      AppComponent,
      // 只在开发环境声明组件
      #if ALLOW_DEV_COMPONENTS
      DevOnlyComponent
      #endif
    ],
    imports: [
      CommonModule,
      // 只在开发环境导入模块
      #if ALLOW_DEV_COMPONENTS
      DevToolsModule
      #endif
    ]
  })
  export class AppModule { }
  

  生产构建时，TS编译器会直接把#if ALLOW_DEV_COMPONENTS块里的代码全部删掉，对应的组件/模块完全不会出现在最终的打包文件里。

三、额外提醒 #

• 如果是懒加载模块，同样可以在路由配置里用条件编译来移除对应的懒加载路径，这样连单独的chunk文件都不会生成。
• 打包完成后，可以用source-map-explorer工具分析构建产物，确认目标组件的代码确实没有被包含进去，心里更踏实。

内容的提问来源于stack exchange，提问作者Max101