vue项目优化
原因
打开页面速度过慢,影响用户使用
需求
降低单点页面请求资源数量,减小包文件大小
分析
- 第一层
当前项目是需要进行单点登录访问,分析访问页面的整体过程
- 分析问题关键点
分析单点的逻辑:无优化,单点的逻辑不可调整
单点的接口:可优化,使用专用的无业务的单点接口,之前使用的单点接口是使用其他的业务接口进行验证的,后端处理
业务的接口:可优化,后端业务优化,后端处理
- 第二层
访问资源中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) - 第三层
使用analyze插件分析,有众多的优化点
app.js入口文件里面包含了前后端的多语包,需要想办法解决
编译后的一个js包,包含自定义ui组件库,需要整理和优化自定义组件库
发现了几个偏大的js插件,可以使用externals进行cdn引入 - 服务器配置,静态资源压缩
查看network,size里有两个数值,一个是压缩后的传输资源,一个是解压后的资源,大文件这两个数值就会差别特别大,小资源可能不明显;这个时候就要启用静态资源压缩