Angular 构建时如何移除仅在开发模式下使用的专用模块？

方案1：环境变量+Tree Shaking 自动移除（最常用） #

目前所有主流前端构建工具（Webpack、Vite、Rollup等）的生产构建默认都开启了死代码删除能力，只要配合环境变量做条件判断，就能自动过滤开发专属代码。

• 首先确认构建工具的环境变量标识：Vite 可以直接用 import.meta.env.DEV，Webpack 生态（Vue CLI、Create React App）默认支持 process.env.NODE_ENV，生产构建时该值会自动被设为 production。
• 模块引入、路由注册逻辑都放在开发环境的判断分支内即可：

// 仅开发环境引入data-generator模块
if (process.env.NODE_ENV === 'development') {
  const dataGenerator = require('data-generator')
  dataGenerator.init()
}

// 路由仅在开发环境添加generate-data条目
const routes = [
  // 生产环境通用路由
  { path: '/', component: Home },
  { path: '/list', component: List },
  // 开发专属路由
  ...(process.env.NODE_ENV === 'development' ? [
    { path: '/generate-data', component: () => import('./pages/GenerateData') }
  ] : [])
]

注意：不要在条件判断外做顶层的import dataGenerator from 'data-generator'引入，ES Module的顶层import会被强制提升，无法被Tree Shaking移除，要用动态require或者动态import写在条件分支内部。

方案2：构建插件强制移除 #

如果对代码隔离要求更高，可以通过自定义构建插件直接删除生产环境不需要的代码段：

• Webpack 生态可以配合 DefinePlugin + 自定义Babel插件，匹配所有data-generator引入和/generate-data路由相关的代码，生产构建时直接剔除。
• Vite 生态可以在自定义插件的transform钩子中处理对应文件，直接移除开发专属代码逻辑。

方案3：多入口完全隔离 #

如果项目逻辑复杂度高，也可以配置两套入口文件完全隔离开发和生产代码：

• 开发环境入口main.dev.js：包含data-generator引入、开发路由注册等所有开发专属逻辑
• 生产环境入口main.prod.js：完全不涉及开发相关代码
  然后在package.json的启动、构建脚本中指定对应入口即可，这种方案不会出现开发代码漏进生产包的问题。

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