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

在 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 调用。

配置步骤：

1. 修改 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'));
   };
   

2. 构建生产环境代码

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

   pnpm build:weapp --mode production
   

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

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

3. 效果

   • 生产环境中，所有 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']
  }
  

  Similar code found with 2 license types

  
  （图片来源网络，侵删）