Vue + ElementUI的电商管理系统实例20 项目优化-生成打包报告
2023-09-27 14:24:39 时间
项目优化策略
1、生成打包报告
打包时,为了直观的发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种:
1) 通过命令行参数的形式生成报告
// 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以帮助分析报告内容 vue-cli-serve build --report
2) 通过可视化的UI面板直接查看报告(推荐)vue ui
在可视化的UI面板中,通过控制台和分析面板,可以方便的看到项目中锁存在的问题。
打开可视化UI面板,选择 build 中的运行,完成后就可以在控制台(仪表盘)或者分析面板中查看报告内容。
速度统计面板:是在不同网络状态下,项目打开所需要的时间。
资源面板:
这个会发现有一个资源后面有一个惊叹号,这个是代表:这个文件的体积太大了。
依赖项面板:
在依赖项里面按照从大到小都排列了出来。
相关文章
- 【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
- VUE v-for 循环的 2 个使用
- vue入门:(底层渲染实现render函数、实例生命周期)
- Vue中 TodoList 示例: 浏览器本地存储、自定义事件
- Ant Design Vue栅格Grid的使用
- vue配合axios连接express搭建的node服务器接口_简单案例
- Vue 简单实例 地址选配10 - 确认地址 - 下一步
- Vue + ElementUI的电商管理系统实例12 分类参数
- Vue + ElementUI的电商管理系统实例25 项目优化-通过 CDN 优化 ElementUI 的打包
- Vue + ElementUI的电商管理系统实例17 顶部进度条效果
- Vue + ElementUI的电商管理系统实例05 修改用户
- 使用IDEA工具配置和运行vue项目(详细其中的坑)
- vue实例的生命周期
- vue路由导航守卫及前置后置钩子函数参数详解
- Vue技术10.绑定样式
- vue 里面的slot属性
- vue中Cannot read property '_wrapper' of undefined 报错
- vue+element的表格分页和前端搜索
- Vue系列(二):发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
- Vue核心②(MVVM、数据代理)
- vue 中包含哪些属性 和 data实例 在component 中和在Vue中
- 【Vue 开发实战】基础篇 # 14:template和JSX的对比以及它们的本质
- vue移动端路由切换完整实例
- Vue 组件间的样式污染
- Vue实例详解与生命周期
- Vue 2.0 起步(2) 组件及 vue-router实例 - 微信公众号RSS
- Vuex2.0 + Vue-Resource Todo实例