项目 react+taro 编写的微信小程序，什么命令，可以减少console的显示

news2026/2/16 11:52:49

在 Taro 项目中，为了减少 console 的显示（例如 console.log、console.info 等），可以通过配置 terser-webpack-plugin 来移除生产环境中的 console 调用。

配置步骤：
修改 index.js 文件
在 mini.webpackChain 中添加 terser-webpack-plugin 配置：

const config = {
  projectName: 'taro-react',
  date: '2025-5-10',
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: [],
  defineConstants: {},
  copy: {
    patterns: [],
    options: {}
  },
  framework: 'react',
  compiler: 'webpack5',
  cache: {
    enable: false
  },
  mini: {
    webpackChain(chain) {
      // 生产环境移除 console
      if (process.env.NODE_ENV === 'production') {
        chain.optimization.minimize(true);
        chain.plugin('terser').use(require('terser-webpack-plugin'), [{
          terserOptions: {
            compress: {
              drop_console: true, // 移除所有 console
              drop_debugger: true // 移除 debugger
            }
          }
        }]);
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {}
      }
    }
  }
};

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'));
  }
  return merge({}, config, require('./prod'));
};

构建生产环境代码
使用以下命令构建生产环境代码：
pnpm build:weapp --mode production
在 Taro 项目中，为了减少 console 的显示（例如 console.log、console.info 等），可以通过配置 terser-webpack-plugin 来移除生产环境中的 console 调用。

配置步骤：

修改 index.js 文件
在 mini.webpackChain 中添加 terser-webpack-plugin 配置：

const config = {
  projectName: 'taro-react',
  date: '2025-5-10',
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: [],
  defineConstants: {},
  copy: {
    patterns: [],
    options: {}
  },
  framework: 'react',
  compiler: 'webpack5',
  cache: {
    enable: false
  },
  mini: {
    webpackChain(chain) {
      // 生产环境移除 console
      if (process.env.NODE_ENV === 'production') {
        chain.optimization.minimize(true);
        chain.plugin('terser').use(require('terser-webpack-plugin'), [{
          terserOptions: {
            compress: {
              drop_console: true, // 移除所有 console
              drop_debugger: true // 移除 debugger
            }
          }
        }]);
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {}
      }
    }
  }
};

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'));
  }
  return merge({}, config, require('./prod'));
};

构建生产环境代码
使用以下命令构建生产环境代码：

pnpm build:weapp --mode production

或者，如果你使用的是 npm/yarn：

npm run build:weapp --mode production
# 或
yarn build:weapp --mode production

效果
- 生产环境中，所有 console.log、console.info、console.debug 等调用都会被移除。
- console.warn 和 console.error 不会被移除（用于调试和错误追踪）。
- debugger 语句也会被移除。

注意事项：

确保 terser-webpack-plugin 已安装（Taro 默认会安装）。
在开发环境中，console 调用仍然会保留，方便调试。

如果需要移除所有类型的 console，可以在 terserOptions.compress 中添加更多配置，例如：

compress: {
  drop_console: true,
  drop_debugger: true,
  pure_funcs: ['console.log', 'console.info', 'console.debug', 'console.warn', 'console.error']
}