react start 控制台日志优化

lixh_man

已于 2022-03-18 17:22:06 修改

阅读量931

点赞数

于 2022-03-18 16:51:08 首次发布

本文链接：https://blog.csdn.net/lixinhua_man/article/details/123579150

版权

react 17版本 start 后控制台有打印日志信息

控制台信息简介

1.在我们执行webpack之后，终端会有一些信息,其中有
a.Hash，他的值代表了本次打包的唯一的值。
b.webpack的版本号
c.耗时，文件编译
d.输出的文件名称
e.还有主要用的是哪些文件进行的编译
f.插件引起的一些编译的过程，会进行展示

这样使得控制台信息量过多，感官视觉体验不是特别好

11111

本身就是基于webpack基础搭建的，在react，npm run eject后将config配置暴露出来添加 stats: ‘errors-only’

剖析 webpack的stats的优化方式

默认情况下是verbose，也就是全部输出，此刻我们将他改为“errors-only”方式，这个比较简单，只需要在开发环境和生产环境的webpack.dev.js和webpack.prod.js中添加stats配置即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lixh_man

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

React Admin 前端脚手架之ant-design-pro

西京刀客

01-04

2607

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

React-App-for-System-Log-Analyzer：用于系统日志分析器的React Web客户端

02-12

它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。最小化构建，文件名包含哈希。您的应用已准备好进行部署！有关更多信息，请参见有关的部分。 yarn eject 注意：这是单向操作。 eject ，您将...

1 条评论您还未登录，请先登录后发表或查看评论

react-storybook-console：React Storybook控制台

02-04

React Storybook控制台此包装已弃用。请使用官方控制台附加：：最新更新包括对React 16的支持什么在故事书中添加一个面板，以显示发送到控制台日志，错误，警告或信息功能的所有内容。怎么样安装 npm install react-storybook-console --save-dev 利用 1-将模块导入addons.js文件 // .storybook/addons.js import '@kadira/storybook/addons'; import 'react-storybook-console/dist/register.js'; 2-在故事中添加

React Native 打印 log 日志输出

最新发布

qq_56298427的博客

09-06

393

首先：安装npm install react-to-print。发票的单据打印，我这里用到的是react-to-print。

React修行日志（一）

ZhangGQ专栏

08-19

208

目录关于React当前前端三大主流框架DIFF算法Node.jswebpack项目的创建关于React React 是一个用于构建用户界面的 JAVASCRIPT 库； React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）； React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源； React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它；当前前端三大主流框架 Angular.js 较

react-changelog：轻松将您的更改日志包含为React组件

02-11

React变更日志轻松将您的变更日志包含为React组件演示版安装 npm install --save react-changelog 用法 import React , { Component } from " react " ; import ReactChangelog from " react-changelog " ; class Example extends Component { render () { return < ReactChangelog xss=removed>; } } 执照麻省理工学院:copyright:

react学习日志3

rain_tsubasa的博客

10-12

375

demo2 以下这个demo来自https://github.com/liwudi 作为自己学习给自己分析一下代码这是一个简单的路由功能的Redirect 的demo 实现结果为，当点击非公开页面是，由点击的路由跳到判断是否登陆的路由，代码如下 App.js render() { return(

reactjournal:重构React日志

04-08

它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。生成被最小化，并且文件名包括哈希值。您的应用已准备好进行部署！有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 ...

react-tiny-dom:using使用react-reconciler的react-dom的最小实现

04-12

React性领域 react-tiny-dom是一个最小的实施的使用阵营16官方渲染API定制渲染器。这个项目的目的是通过使用一个实用而又熟悉的环境，即浏览器DOM，来展示传递给的...如何自定义控制台中的方法日志？默认情况下，演

VS Code开发React-Native及Flutter 开启无线局域网安卓真机调试问题

08-19

4. 在 VS Code 终端运行 yarn start（或者 react-native start），默认端口是 8081，如果端口被占用可以在命令后加入 --port=指定的端口号。 5. 在浏览器中打开该端口地址，在 VS Code 控制台也可以看到访问日志和...

react-reactlog在你的浏览器console中使用React

08-14

react-log: 在你的浏览器console中使用React

console-feed:将console.log捕获到React组件中

05-02

控制台供稿一个React组件，显示当前页面，iframe或跨服务器传输的控制台日志。谁在使用它特征 控制台格式设置-设置样式并为您的日志提供颜色，并使链接可点击 DOM节点-通过语法突出显示轻松检查和扩展HTML元素 console.table以表格格式查看日志其他控制台方法： console.time查看完成事件所需的时间（以毫秒为单位） console.assert断言一个陈述是真实的 console.count计算发生某事的次数内置JSON序列化-对象，函数和DOM元素可以在JSON中进行编码/解码安装 yarn add console-feed # or npm install console-feed 基本用法 CodeSandbox import React from 'react' import { Hook , Console , Decode }

react-terminal:使用 Reactjs 创建终端组件

06-14

React终端使用 Reactjs 创建一个可以嵌入到 HTML 文档中的终端组件。该组件基于 Eric Bidelman ( ) 创建的终端，可以在查看

React控制台提示安装react devtools

NumbSilver的博客

05-08

290

控制台提示：运行react项目的时候浏览器控制台总会有这个提示，强迫症患者忍不了，决定解决一下。安装react devtools：这里就是提示你去安装devtools调试工具尝试了一下按照教程NPM安装的方式，非常复杂还不是很好用直接在Chrome商店下载插件即可提示就没有啦 ...

JS 日志管理器

GL_MINE_CSDN的博客

01-09

834

JS 日志管理器在js开发的过程中少不了控制日志的输出，下面是对日志管理，工具类主要采用ES6语法。 /**************************************日志管理器************************************/ const TAG = "LoggerUtils"; let IS_DEV = true; const CLEAR =

create-react-app使用v5版本创建项目，运行输出很多webpake日志

weixin_46662539的博客

03-03

595

昨天自己准备做一个react的demo，复习一下。使用了create-react-app v5版本，发现会莫名的出现一堆webpake日志经过排查发现是因为create-react-app v5导致的问题，你也可以手动修改**“react-scripts”: "5.0.0"为4.0.3版本**，可以暂时解决日志输出的问题。但是不建议这么做。因为后期会出现一些不可控的bug，例如eslint的配置。猜测出现日志输出的问题是因为webpack 不再填充节点内置包导致的。可以参考github 建议还是

在react当中我们如何实现单表的简单日志功能？

qq_53509791的博客

03-31

456

在date组件当中，我们是通过onchang方法，在input当中我们是使用onblurs的方法，在select组件当中我们使用的是onselect的方法，来进行失去焦点以后数据的一个获取。然后我们这边的数据更新的话使用的是antd的date和input、select的组件，然后我们需要在我们的这几个边框当中定义监听事件来监听数据的变化。首先我们需要在我们的Modal的中流出空余的位置来显示我们更新数据之后的显示日志的地方。这里我们使用的是一个antd里面的modal弹框和一个tabs的一个组件。

探索React组件开发新维度：Retoggle——你的UI控制台

gitblog_00005的博客

05-13

324

探索React组件开发新维度：Retoggle——你的UI控制台 retoggle ???? UI controls as React Hooks to control your component state from outside 项目地址: https://gi...

react 移动端控制台插件

12-07

React 移动端控制台插件是一种用于在移动端开发中辅助调试和查看日志的工具。它可以通过在React Native或React技术栈的移动应用中集成，方便开发者在开发过程中对应用的状态和运行情况进行监控和调试。使用React 移动端控制台插件，开发者可以实时查看应用的渲染层级、组件树、props和state等重要信息。通过这些信息，开发者可以快速定位并解决应用程序中的问题，提高开发效率。同时，该插件还提供了一些调试工具，如修改组件的props和state、强制页面重新渲染、捕获错误等功能，方便开发者进行开发和调试。该插件还支持监控应用的性能数据，如页面加载时间、资源加载情况、内存使用情况等，帮助开发者优化应用的性能和用户体验。开发者可以通过这些数据分析应用的性能瓶颈，优化代码，提升应用的运行速度和响应能力。总之，React 移动端控制台插件是一款功能强大的开发工具，可以提供丰富的调试和监控功能，帮助开发者更高效地进行移动应用的开发和调试工作，并优化应用的性能和用户体验。它在移动应用开发中具有重要的作用，是开发者不可或缺的一部分。