Angular生产构建如何跳过指定测试懒加载模块打包

你当前的路由配置仅做了运行时的访问拦截，构建阶段的静态分析无法识别该分支逻辑，因此依然会打包测试模块的懒加载chunk，可通过以下几种方式实现构建阶段直接剔除：

方案1：Angular原生文件替换（推荐，无兼容问题） #

这是最稳定的实现方式，完全基于Angular CLI原生能力，不需要修改第三方构建配置：

• 首先拆分测试路由为独立文件：
  新建src/app/routes/testing.routes.ts存放测试模块路由：

  import { Routes } from '@angular/router';
  export const TESTING_ROUTES: Routes = [
    {
      path: 'testing',
      loadChildren: () => import('@fnx-nx/front/main-app-testing').then(m => m.FrontMainAppTestingModule)
    }
  ];
  

  再新建生产环境用的空路由文件src/app/routes/testing.routes.prod.ts：

  import { Routes } from '@angular/router';
  export const TESTING_ROUTES: Routes = [];
  

• 打开angular.json，找到对应项目生产构建配置下的fileReplacements数组，新增替换规则：

  {
    "replace": "src/app/routes/testing.routes.ts",
    "with": "src/app/routes/testing.routes.prod.ts"
  }
  

• 修改原路由文件，直接引入拆分的路由常量即可：

  import { Routes } from '@angular/router';
  import { TESTING_ROUTES } from './routes/testing.routes';
  
  export const ROUTES: Routes = [
    ...TESTING_ROUTES,
    // 其余业务路由保持原有写法
  ];
  

  生产构建时，测试路由会被直接替换为空数组，测试模块没有任何入口引用，构建工具会直接跳过该模块的打包，不会生成对应懒加载chunk。

方案2：基于静态死代码消除实现（无需拆分文件） #

如果不想新增文件做替换，要确保环境变量的写法满足构建工具的静态分析要求：

• 将原路由里的环境导入从../environments/environment.prod改为默认环境文件：

  import { environment } from '../environments/environment';
  

• 确认angular.json生产配置中已经自带environment.ts替换为environment.prod.ts的规则（Angular CLI默认生成的项目都预置了该规则）。
  生产构建压缩阶段，构建工具会将environment.production替换为硬编码的true，自动删除永远不会执行的测试路由分支，测试模块无引用时就不会被打包。注意不要对environment的属性做二次赋值、函数包裹等操作，必须保证静态分析阶段能直接拿到production字段的静态布尔值，否则死代码消除会失效。

针对Nx项目的补充方案 #

从你的模块路径@fnx-nx判断项目是Nx管理的Monorepo，还可以通过Nx的模块边界规则实现：给测试模块打type:testing类的标签，在根模块边界规则中配置生产构建的应用不允许引入测试类标签的模块，从依赖解析层面直接阻断测试模块进入生产构建依赖树。

注意：不要尝试通过在tsconfig.json中加exclude规则排除测试模块，Angular CLI构建时不会以tsconfig的exclude作为模块打包的排除依据，只有当模块完全不被生产环境入口代码引用时，才会被构建工具完全剔除。

验证效果可以直接执行生产构建命令，检查dist目录输出的chunk中是否存在testing相关文件，也可以通过包分析工具确认构建产物中是否包含测试模块代码。

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