vue 访问项目优化

vue项目优化

原因

打开页面速度过慢,影响用户使用

需求

降低单点页面请求资源数量,减小包文件大小

分析
  1. 第一层
    当前项目是需要进行单点登录访问,分析访问页面的整体过程
  • 分析问题关键点
    分析单点的逻辑:无优化,单点的逻辑不可调整
    单点的接口:可优化,使用专用的无业务的单点接口,之前使用的单点接口是使用其他的业务接口进行验证的,后端处理
    业务的接口:可优化,后端业务优化,后端处理
  1. 第二层
    访问资源中vendor.js(1.1M)、app.js(345k)、app.css(815k)文件过大
    vendor.js中包含了vue.js、vue-router.js等公共js,以及echar.js、高德地图非公共js文件,
    解决方案:使用cnd的方式引入这些静态资源,使用externals进行注册,非公共js使用按需引入
    使用cnd拆包之后,vendor.js(55k)、app.js(91k)、app.css(196k)
  2. 第三层
    使用analyze插件分析,有众多的优化点
    app.js入口文件里面包含了前后端的多语包,需要想办法解决
    编译后的一个js包,包含自定义ui组件库,需要整理和优化自定义组件库
    发现了几个偏大的js插件,可以使用externals进行cdn引入
  3. 服务器配置,静态资源压缩
    查看network,size里有两个数值,一个是压缩后的传输资源,一个是解压后的资源,大文件这两个数值就会差别特别大,小资源可能不明显;这个时候就要启用静态资源压缩
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值