如何分离JavaScript应用的生产与开发组件并实现干净打包？

针对你的场景，不用在代码里写满if (mode !== 'prod')，可以从构建工具、模块拆分这几个方向入手，彻底分离生产和开发代码：

1. 环境变量+死代码消除（最常用） #

主流构建工具（Webpack、Vite、Rollup）都支持注入环境常量，配合现代压缩工具（Terser，比Uglify更强大）可以自动移除无用代码：

• 首先在构建配置里定义环境模式（生产/开发），比如Vite会自动设置import.meta.env.MODE，Webpack可以用DefinePlugin注入process.env.NODE_ENV。
• 代码里用常量条件包裹开发代码：

// 开发环境才执行的逻辑
if (import.meta.env.MODE === 'development') {
  // 调试面板初始化
  initDebugPanel();
  // 暴露内部状态（仅开发用）
  window.__APP_INTERNAL_STATE__ = appState;
}

生产构建时，构建工具会把import.meta.env.MODE替换成'production'，Terser会识别if ('production' === 'development')这种恒假条件，直接删除整个代码块，连条件判断都不会留在最终产物里。

注：UglifyJS对这类死代码的处理确实不如Terser，现在主流构建工具生产模式默认用Terser，无需额外配置。

2. 模块拆分+条件导入 #

把开发相关代码单独拆成独立模块，通过动态导入的方式仅在开发环境加载：

// 主逻辑（生产开发共用）
import { renderApp } from './core';
renderApp();

// 仅开发环境加载调试模块
if (import.meta.env.MODE === 'development') {
  import('./debug-tools').then(({ setupDebug }) => {
    setupDebug();
  });
}

生产构建时，构建工具会自动忽略这个动态导入的模块，既不会打包进生产包，也不会留下导入逻辑。

3. 双入口文件（最彻底） #

给项目设置两个入口文件，分别对应生产和开发环境：

• src/main.prod.js（生产入口）：

import { initApp } from './core';
initApp();

• src/main.dev.js（开发入口）：

import { initApp } from './core';
import { initDebug } from './debug-tools';

initApp();
initDebug();

构建时根据环境选择对应的入口：生产环境打包main.prod.js，完全不会包含任何开发代码；开发环境用main.dev.js，自动加载调试工具。这种方式逻辑最清晰，新手也容易上手。

4. 进阶：Babel插件自定义移除（按需选择） #

如果需要更灵活的标记方式，可以写一个简单的Babel插件，通过注释标记开发代码，编译阶段直接移除：

// @dev-only
logInternalState();

插件识别@dev-only注释后，会删除对应的代码行。不过这个需要一点Babel基础，新手可以先从前面三个方案开始。

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