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

项目 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

相关文章:

  • Django orm详解--工作流程
  • Mac安装配置InfluxDB,InfluxDB快速入门,Java集成InfluxDB
  • 答题pk小程序题库题型更新啦
  • Kafka Kraft模式集群 + ssl
  • 基于开源链动2+1模式AI智能名片S2B2C商城小程序的产品驱动型增长策略研究
  • vs2022 调试时 控制台界面不出来
  • kafka实践与C++操作kafka
  • AI智能混剪核心技术解析(一):字幕与标题生成的三大支柱-字幕与标题生成-优雅草卓伊凡
  • 李宏毅NLP-7-CTC/RNN-T文本对齐
  • Jupyter Notebook 完全指南:从入门到高效使用
  • VS Code新手基础教程
  • MERIT:用于可靠且可解释的肝纤维化分期的多视图证据学习|文献速递-深度学习医疗AI最新文献
  • linux make使用方法
  • Rust 项目实战:命令行搜索工具 grep
  • 运动规划实战案例 | 图解基于状态晶格(State Lattice)的路径规划(附ROS C++/Python仿真)
  • 基于Flask实现豆瓣Top250电影可视化
  • [网页五子棋]项目介绍以及websocket的消息推送(轮询操作)、报文格式和握手过程(建立连接过程)
  • 在 Windows 系统下使用 Qt 配置 OpenCV 和 MySql
  • 古腾堡编辑器教程:如何使用WordPress图库区块
  • 论文阅读: 2023 NeurIPS Jailbroken: How does llm safety training fail?
  • 网站推广软文案例/百度竞价冷门产品
  • 网站多少流量够用/google关键词推广
  • 东台专业做网站/产品互联网推广
  • 做lol数据的网站/营销伎巧第一季
  • 网络推广员招聘/seo赚钱方式
  • 怎么做网站的推广/学生个人网页制作html代码