当前位置: 首页 > article >正文

项目 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) {// 生产环境移除 consoleif (process.env.NODE_ENV === 'production') {chain.optimization.minimize(true);chain.plugin('terser').use(require('terser-webpack-plugin'), [{terserOptions: {compress: {drop_console: true, // 移除所有 consoledrop_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.logconsole.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) {// 生产环境移除 consoleif (process.env.NODE_ENV === 'production') {chain.optimization.minimize(true);chain.plugin('terser').use(require('terser-webpack-plugin'), [{terserOptions: {compress: {drop_console: true, // 移除所有 consoledrop_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.logconsole.infoconsole.debug 等调用都会被移除。
    • console.warnconsole.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

http://www.lryc.cn/news/2394601.html

相关文章:

  • Android 开发 Kotlin 全局大喇叭与广播机制
  • 微信小程序关于截图、录屏拦截
  • 基于51单片机的音乐盒键盘演奏proteus仿真
  • 【unity游戏开发——编辑器扩展】EditorUtility编辑器工具类实现如文件操作、进度条、弹窗等操作
  • WPF中自定义消息弹窗
  • Android之ListView
  • 查服务器信息 常用的一些命令 =^^ =
  • PS裁剪后像素未删除?5步解决“删除裁剪像素”失效问题
  • 《Spring Cloud Gateway 快速入门:从路由到自定义 Filter 的完整教程》​
  • 第3节 Node.js 创建第一个应用
  • 我们来学mysql -- “数据备份还原”sh脚本
  • mkcert实现本地https
  • 【排序算法】快速排序详解--附详细流程代码
  • Kerberos面试内容整理-会话密钥的协商与使用
  • 解决各个系统报错TDengine:no taos in java.library.path问题
  • java helloWord java程序运行机制 用idea创建一个java项目 标识符 关键字 数据类型 字节
  • LVS-NAT 负载均衡群集
  • 免费文本转语音工具体验:祈风TTS使用
  • ipv6与p2p的关系
  • JS和TS的区别
  • Python实现P-PSO优化算法优化BP神经网络分类模型项目实战
  • Linux --进度条小程序更新
  • JVM——回顾:JVM的起源、特性与系统构成
  • 实现MPC钱包
  • 每日算法刷题Day19 5.31:leetcode二分答案3道题,用时1h
  • 【线上故障排查】缓存热点Key导致Redis性能下降的排查与优化
  • 关于镜像如何装进虚拟机
  • CPU特权级别:硬件与软件协同构建系统安全的基石
  • 智慧体育馆数字孪生,场馆管理智能化
  • 回归算法模型之线性回归