美文网首页前端专刊
vue项目性能优化

vue项目性能优化

作者: 一包 | 来源:发表于2019-04-07 11:59 被阅读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(服务端渲染)
  • 用户体验

相关文章

  • vue 性能优化点

    vue项目中,经常会遇到一些性能优化点,以下就是我在工作中,总结的优化点 vue 性能优化点 1,路由懒加载 2,...

  • [性能优化]Webpack篇

    参考文章:Vue 项目性能优化 — 实践指南(网上最全 / 详细) Webpack 对图片进行压缩 在 vue 项...

  • Vue笔记六:Vue项目的性能优化之路

    Vue笔记六:Vue项目的性能优化之路 我最近也经常面试外包同事。面试的时候,总会有个问题,“你说一下性能优化的手...

  • Vue 项目性能优化 — 实践指南(网上最全 / 详细)

    Vue 项目性能优化 — 实践指南(网上最全 / 详细) 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,...

  • Vue项目性能优化

    主要分为三个方面来优化 Vue 代码层面的优化 webpack 配置层面的优化 基础的 Web 技术层面的优化 一...

  • Vue项目性能优化

    为什么要进行性能优化 目的:做vue的项目开发也有一段时间,一开始只考虑基本功能的实现,现在看到自己的代码就会想,...

  • vue项目性能优化

    1.webpack-bundle-analyzer分析SPA应用

  • vue项目性能优化

    一、 使用webpack-bundle-analyzer 分析打包后的生成的文件结构进行优化; 在package....

  • vue项目性能优化

    对js,css开启gzip压缩,图片是没效果所以不需要 对路由组件进行懒加载,如果使用同步的方式加载组件,在首屏加...

  • vue项目优化一

    vue 项目开启gzip自拍压缩和部署 nginx 开启gzip优化性能 第一步,在vue项目中安装依赖并将pro...

网友评论

    本文标题:vue项目性能优化

    本文链接:https://www.haomeiwen.com/subject/fizjiqtx.html