IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> ant-design-vue-jeecg关于首页加载过慢的优化小结 -> 正文阅读

[JavaScript知识库]ant-design-vue-jeecg关于首页加载过慢的优化小结

网站首页登陆的时候,等待较长,用户反馈体验较差,我们可以从以下几个思路优化处理以下。
1.为什么等待较长?
在这里插入图片描述

很明显,有个文件加载过慢了。chunk-vendors是什么文件呢?第三方模块文件,就是node_models里面的文件,ant-design-vue-jeecg把vue主配置文件(main.js)里依赖加载需要的文件全部打包到了这个文件里,文件过大,就会加载会过慢。
2.解决问题的第一步。
去掉不必要的依赖加载。
在这里插入图片描述

Jeecg官网说明了加载所需要的必要文件,个人建议除建议外,其余进行相应移除和懒加载处理。
在这里插入图片描述

处理如上,online在线表单未用到,直接注释掉,其余需要的依赖放入所需依赖的组件或页面。
在这里插入图片描述

把不需要的依赖在package.json里面全部删除,删除node_models文件,运行yarn install 全部重新生成。
3.其他依赖文件处理
在这里插入图片描述

在需要的文件里面,将依赖一次引入即可。这样做的坏处就是,页面每次被请求的时候都需要被加载。好在ant-design-vue-jeecg本身就是一个组件嵌套处理的架构,将重复依赖较高的文件,直接在路由跳转的首页处理即可,可以进一步减少依赖的加载。
那么问题来了,哪一个是登陆成功后最先加载的页面,最外层的组件是哪一个?那就来说说ant-design-vue-jeecg框架的路由生成,和跳转顺序。
找路由先看路由前哨的配置,看代码
在这里插入图片描述

登陆成果后,先执行第一步去后台拿到了我们后台配置的菜单数据,然后交给了第二步,构造了主路由结构。
在这里插入图片描述

顺藤摸瓜,找到这个文件
在这里插入图片描述

很显然,TabLayout,就是首页(想换首页的就在这里修改配置就行),做外层组件,传进来的数据,通过方法构造成了它的子组件,子组件如何构造的?看代码
在这里插入图片描述

关键问题,懒加载出现了。Antd把所有的自组建进行了懒加载处理,这样就减少了主组件加载过大的问题,我们可以放心的可以吧一些重复加载较大的依赖加载到主组件中,一些不重要的加载懒加载处理到相应的页面即可。
处理完后,重新打包,本地运行测试(这样可以先排除网络带宽因素影响)
在这里插入图片描述

chunk-vendors加载速度116ms,文件大小2.8兆,完成。

题外,ant-design-vue-jeecg做了那些处理,来减小他们的打包文件呢,我们还有那些优化空间呢
在这里插入图片描述

首先他们关闭了source map(这是个啥,不懂的查一下,简单说console.log的时候,你们能看见打印出的东西所在的文件位置就是它的作用,正式环境没有用,还占文件大小)

第二步关闭了,console.log(调试完代码,不删除console的童鞋注意了,这是一个坏习惯),这个方法避免了,将代码中所有的console.log打包进js文件。

除此之外 还引入了
在这里插入图片描述

进行了打包文件的压缩
代码如下
在这里插入图片描述

文件压缩后,生成了一些列gz文件,对相关配置文件进行了压缩。
在这里插入图片描述

压缩后,vue本身是不会访问gz文件的。利用前后端分离的特性,再利用nginx发布前端即可,对前端调取进行配置。
在这里插入图片描述

Nginx配置验证,
在这里插入图片描述

访问文件改成了gzip的,说明nginx成功了.
所以一般情况下,项目发版我们采用前后端分离的方法,前端用nginx执行,不建议极简模式发版的原因就在这。

除此还有那些优化空间呢。Antd-jeecg 默认配置了很多我们很多项目可能用不到的js文件,比如vue-print-nb-jeecg打印插件,vue-area-linkage区域选择插件,比如这两个插件,很多不需要连接打印机的项目就可以去掉print插件,很多用到区域选择的,自己用数据字典处理的就可以去掉vue-area-linkage(建议不要用数据字典处理区域数据),如果项目打包还过大,就要检查检查package.Json文件了,看看用不到的尽量都删除一下。重新yarn一下就好了。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-16 17:34:47  更:2021-12-16 17:37:06 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 11:06:21-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码