vue项目性能优化

  • 对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(服务端渲染)
  • 用户体验
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容