React 学习——打包后，包体积可视化

最新推荐文章于 2024-08-16 17:55:57 发布
最新推荐文章于 2024-08-16 17:55:57 发布
阅读量86 收藏
点赞数 1
分类专栏： react 文章标签： react.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40269801/article/details/141254902
版权

1、安装插件 （  source-map-explorer ）

npm i source-map-explorer

2、在配置文件package.json中加入  （ "analyze": "source-map-explorer build/static/js/*.js" ），位置截图

"analyze": "source-map-explorer build/static/js/*.js"

3、用命令启动查看  （ npm run analyze ）

4、如果安装 配置都正确的话，用命令查看后，会自动打开浏览器。展示截图如下

大个个个个个儿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack打包经验——处理打包文件体积过大的问题
ZQ13771472517的博客
07-18 1919
前言 最近对一个比较老的公司项目做了一次优化，处理的主要是webpack打包文件体积过大的问题。 这里就写一下对于webpack打包优化的一些经验。 主要分为以下几个方面： 去掉开发环境下的配置 ExtractTextPlugin：提取样式到css文件 webpack-bundle-analyzer：webpack打包文件体积和依赖关系的可视化 CommonsChunkPlugin：提...
记一次react前端项目打包优化的方法
10-15
在本文中，我们将深入探讨如何优化一个React前端项目，特别是针对打包过程中的性能问题。首先，我们遇到的问题是在uat环境中，由于bundle.js文件过大（3.6MB），导致页面加载时白屏时间超过30秒，严重影响用户体验。...
web性能优化—— 打包构建优化
weixin_44433834的博客
09-09 25
作者：麦乐 来源： 恒生LIGHT云社区 ...
Webpack 打包优化之体积篇
小飞侠的博客
12-26 2782
    谈及如今欣欣向荣的前端圈，不仅有各类框架百花齐放，如Vue， React， Angular等等，就打包工具而言，发展也是如火如荼，百家争鸣；从早期的王者Browserify, Grunt，到后来赢得宝座的 Gulp， 以及独树一帜的 fis3, 以及下一代打包神器 Rollup ；在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比。在...
React + antd + webpack打包优化，首屏加载优化
weixin_34191734的博客
02-26 3503
1. 业务js按需加载 实现页面代码分割、按需加载 —— react-loadable 实现路由代码分割具体使用：npm install react-loadable --save复制代码在.babelrc文件中配置：{ "plugins": [ ..., "syntax-dynamic-import", ], },复制代码在路由文件中：import...
记一次 webpack 打包体积优化
weixin_33971205的博客
02-22 242
手头做的项目开发得差不多了，而打包配置是一开始粗略配置的，不大的项目打包出来得6MB+，所以现在必须进行优化。 打包结果分析 执行命令 webpack --profile --json > stats.json ，可以将打包过程的详细信息以 json 格式记录到文件中。依据该文件，webpack-bundle-analyzer、We...
代码自动化重构利器——jscodeshift 初探，2024年最新面试学习
2401_84139924的博客
04-18 1004
前端资料汇总框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
[转] Webpack 打包优化之体积篇
weixin_34396902的博客
02-21 70
谈及如今欣欣向荣的前端圈，不仅有各类框架百花齐放，如Vue，React，Angular等等，就打包工具而言，发展也是如火如荼，百家争鸣；从早期的王者Browserify,Grunt，到后来赢得宝座的Gulp， 以及独树一帜的fis3, 以及下一代打包神器Rollup；在browserify,grunt,gulp,rollup,webpack可以一窥其中部分对比。在本文要探究的是，...
基于React和Echart的数据可视化大屏开源项目
03-25
项目概述：本项目是一款基于React和Echart技术的开源数据可视化大屏应用，主要采用TypeScript进行开发，辅以JavaScript、CSS和HTML等语言。项目包含616个文件，其中主要包括385个JSON配置文件，95个PNG图像资源，...
react大屏可视化项目实例
06-27
【react大屏可视化项目实例】包含react大屏可视化项目实例 【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可...
浅谈React Native打包apk的坑
08-28
React Native 打包 APK 的坑 React Native 是一个基于 JavaScript 和 React 的框架，用于构建跨平台的移动应用程序。在构建 React Native 应用程序时，需要将应用程序打包成 APK 文件，以便在 Android 设备上运行。...
基于REACT和AXIOS的可视化界面拖拽系统
02-10
标题中的“基于REACT和AXIOS的可视化界面拖拽系统”揭示了这是一个使用React库构建的Web应用程序，其中集成了AXIOS库以处理HTTP请求。React是Facebook开发的一个JavaScript库，用于构建用户界面，特别是单页应用...
前端react中new Date(create_time * 1000).toLocaleString()转换问题
最新发布
AndrewPerfect的博客
08-16 135
假设是1723518321，这是一个 Unix 时间戳，表示。要将这个时间戳转换为人类可读的日期格式，通常需要将其乘以 1000，以转换为 JavaScript 中的毫秒时间戳。DateDate。
React概念理解
qq_33715850的博客
08-16 100
React概念理解
react组件优化之React.PureComponent,React.memo
qq_24428851的博客
08-13 487
在开发中我们经常会考虑项目的优化问题，react作为现在前端的热门框架用的人肯定是非常的多。项目的优化问题也是非常重要的一部分，能大大提高项目的流畅度，用户体验会非常好。react项目中会用到大量的组件嵌套，减少一些组件的不必要的渲染，可以大大减少损耗。React.PureComponent和React.memo比较相似，都可以控制组件什么时候应该渲染，但是是浅比较，这意味着对于数组和对象不会进行深层次的比较。下面我们来看一个例子：React.PureComponent要搭配类组件；
react创建项目
weixin_52941842的博客
08-16 56
如果安装了node直接可以使用命令npx create-react-app my-app来创建项目( my-app是项目名称)如果没有安装脚手架会提示你先安装脚手架 输入y回车即可，出现下面截图即表示创建成功。建议node版本大于18，直接终端node -v查看node版本。然后进到项目里面执行npm start命令启动即可。使用脚手架创建借助脚手架工具。
Vue、react父子组件生命周期
weixin_44384273的博客
08-15 226
Vue、react父子组件生命周期，Vue3.0 的生命周期
对于react中input输入框中onBlur和点击输入框外部按钮冲突
AndrewPerfect的博客
08-16 130
处理输入框的失焦事件时发现它影响了外部的提交按钮，这通常是因为失焦事件会触发。可以利用这个事件来确保按钮点击不会被。函数，最终导致无法触发外部按钮进行提交操作。事件来处理按钮点击。在点击按钮时，按钮的。
react打包优化体积
06-03
React应用打包优化体积的方法有以下几个： 1. 使用webpack-bundle-analyzer分析打包后的代码，查看每个模块的大小，找出占用空间较大的模块，进行优化。 2. 使用webpack的tree shaking功能，只打包用到的模块，可以通过在package.json文件中设置"sideEffects"属性来告诉webpack哪些文件是有副作用的，不应该被tree shaking。 3. 使用webpack的code splitting功能，将应用拆分成多个chunk，按需加载，减小首屏加载时间。 4. 使用React.lazy和React.Suspense实现组件的异步加载，减少首屏渲染时间。 5. 使用webpack的压缩插件，如UglifyJsPlugin等，压缩代码，减小文件体积。 6. 使用CDN加载公共依赖，如React、React-dom等，减小打包后文件的体积。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值