vue项目性能优化
2019-04-07 本文已影响37人
一包
- 对js，css开启gzip压缩，图片是没效果所以不需要
- 对路由组件进行懒加载，如果使用同步的方式加载组件，在首屏加载时会对网络资源加载加载比较多，资源比较大，加载速度比较慢。所以设置路由懒加载，按需加载会加速首屏渲染。
- 实现懒加载，实现按需加载，项目打包不会把js全部打包，缺点是把js分开打包，造成多个js文件，会有多次http请求
- 源码优化
- v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
- 为item设置唯一key值，在列表数据进行遍历渲染时，需要为每一项item设置唯一key值，方便vuejs内部机制精准找到该条列表数据。当state更新时，新的状态值和旧的状态值对比，较快地定位到diff。需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点，key的作用主要是为了高效的更新虚拟DOM
- 细分vuejs组件，把所有的组件的布局写在一个组件中，当数据变更时，由于组件代码比较庞大，vuejs的数据驱动视图更新比较慢，造成渲染比较慢。造成比较差的体验效果。所以把组件细分，比如一个组件，可以把整个组件细分成轮播组件、列表组件、分页组件等
- 图片懒加载，v-lazy库，绑定鼠标的scroll事件，滚动到可视区域先再对数据进行加载显示，减少系统加载的数据
- SSR(服务端渲染)
- 用户体验
- fastclick
- loading
- 骨架屏
https://www.jianshu.com/p/41075f1f5297
