vue 访问项目优化

vue项目优化

原因

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

需求

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

分析

1. 第一层
   当前项目是需要进行单点登录访问，分析访问页面的整体过程

• 分析问题关键点
  分析单点的逻辑：无优化，单点的逻辑不可调整
  单点的接口：可优化，使用专用的无业务的单点接口，之前使用的单点接口是使用其他的业务接口进行验证的，后端处理
  业务的接口：可优化，后端业务优化，后端处理

2. 第二层
   访问资源中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）
3. 第三层
   使用analyze插件分析，有众多的优化点
   app.js入口文件里面包含了前后端的多语包，需要想办法解决
   编译后的一个js包，包含自定义ui组件库，需要整理和优化自定义组件库
   发现了几个偏大的js插件，可以使用externals进行cdn引入
4. 服务器配置，静态资源压缩
   查看network，size里有两个数值，一个是压缩后的传输资源，一个是解压后的资源，大文件这两个数值就会差别特别大，小资源可能不明显；这个时候就要启用静态资源压缩