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

在vue-cli中快速使用webpack-bundle-analyzer

webpack-bundle-analyzer 是一个可视化资源分析工具,可以直观地分析打包出的文件有哪些,及它们的大小、占比情况、各文件 Gzip压缩后的大小、模块包含关系、依赖项等。

从vue-cli官方的更新记录可以看到,从vue-cli3开始集成report命令

在这里插入图片描述
在这里插入图片描述
当前环境:
在这里插入图片描述
直接运行npm run --reoprt如下:
在这里插入图片描述
发现并没有生成相应的report报告文件:
在这里插入图片描述
经过一番原因查找,发现是npm命令的问题:
在这里插入图片描述
解决办法:执行命令npm run build -- --report
在这里插入图片描述
dist目录下生成report.html文件,完美解决~
在这里插入图片描述
在浏览器打开report.html就可以看到项目各个文件的大小
在这里插入图片描述


http://www.kler.cn/a/136915.html

相关文章:

  • 在 Vue3 项目中实现计时器组件的使用(Vite+Vue3+Node+npm+Element-plus,附测试代码)
  • 设计模式的主要分类是什么?请简要介绍每个分类的特点。
  • kubernates实战
  • .NET Framework 逐渐过时,.NET 8和 .NET 9引领未来
  • 【论文阅读笔记】IC-Light
  • IntelliJ IDEA 远程调试
  • 代码随想录算法训练营第23期day57|739. 每日温度、496.下一个更大元素
  • Ubuntu 下C++数字雨
  • linux中实现自己的bash
  • linux内核管理
  • Redis篇---第十二篇
  • OpenAI政变背后是科学家创始人的悲歌
  • 一阶低通滤波器(一阶巴特沃斯滤波器)
  • ⑩⑦【MySQL】锁:全局锁、表级锁、行级锁
  • 「Verilog学习笔记」实现3-8译码器①
  • 亚马逊车灯外贸出口CE认证标准办理解析
  • vite vue3配置axios
  • DefaultMQPushConsumer的整体流程
  • windows11系统如何设置锁屏壁纸
  • 中石油勘探院张弢:从业务到架构全面探讨中国石油的数字化转型之路
  • 认识.NET Aspire:高效构建云原生应用的利器
  • Java-类和类的关系
  • 如何用html css js 画出曲线 或者斜线;
  • Flink(六)【DataFrame 转换算子(下)】
  • 一篇文章让你彻底了解Java算法「十大经典排序算法」
  • 〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性