vue最需要被优化的点:首屏加载速度快
vue的优点:
1.不直接操作dom树,造成页面卡顿,而是操作虚拟dom然后在去操作真实dom渲染页面
2.将一些图片直接转换成base64的形式(也就是转变成js代码)
3.组件化开发,实现代码高复用,每一块是一串精短的js代码,解析速度快
加快首屏加载速度的处理方式:
1.使用路由懒加载,当不使用该路由时,不进行加载
2.组件懒加载和v-if的结合使用,由于浏览器加载vue页面会把页面上所有组件,元素全部加载出来,一开始东西加载过多,页面出现会卡顿
使用v-if来判断一开始需要展示的页面模块(组件直接引入即可)
但是组件的弹框,气泡等组件实质上是用v-show判断的,所以直接使用组件懒加载当需要的时候在加载
注意:当组件没有调用加载的时候,不能使用this.$ref来获取组件中的元素,所以当显示了组件后,再去调用获取(可以使用this.$nextTick)
3.项目的包越小,加载速度越快:
下载compression-webpack-plugin,打包项目文件成为gzip的形式
vue.config.js中配置productionSourceMap:false,将vue文件全部压缩
如果有外网的情况:使用cdn的方式下载框架组件
如果无外网的情况:尽可能的使用按需引入的方式引入组件