| |
|
开发:
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关于首页加载过慢的优化小结 |
网站首页登陆的时候,等待较长,用户反馈体验较差,我们可以从以下几个思路优化处理以下。 很明显,有个文件加载过慢了。chunk-vendors是什么文件呢?第三方模块文件,就是node_models里面的文件,ant-design-vue-jeecg把vue主配置文件(main.js)里依赖加载需要的文件全部打包到了这个文件里,文件过大,就会加载会过慢。 Jeecg官网说明了加载所需要的必要文件,个人建议除建议外,其余进行相应移除和懒加载处理。 处理如上,online在线表单未用到,直接注释掉,其余需要的依赖放入所需依赖的组件或页面。 把不需要的依赖在package.json里面全部删除,删除node_models文件,运行yarn install 全部重新生成。 在需要的文件里面,将依赖一次引入即可。这样做的坏处就是,页面每次被请求的时候都需要被加载。好在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成功了. 除此还有那些优化空间呢。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项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
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- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |