Vue项目优化篇 vue3.0项目

一、基本web开发优化技术

1.1 提取公共代码

对相同功能的方法或模块进行提取（可以封装或者选择不封装）多方面引用

提取组件化的CSS样式

1.2 浏览器缓存

应合理运用浏览器缓存

1.3 小图片压缩

对于图标图片有两种处理方案

第一种是把所有icon图组合在一起生成一张雪碧图（或者叫精灵图），但是对开发人员寻找图片位置要耗费些时间

第二种是利用阿里图标进行压缩打包生成iconfont，在代码中直接用class引入即可

1.4 CDN静态资源

项目中如果感觉打包太大的话可以使用cdn引入静态资源，在build -> webpack.base.conf.js的module.exports中写入相应配置，你会发现打包之后会小很多

1.5 开启gzip压缩

在nginx服务器上开启gzip优化性能，vue项目中安装依赖并修改配置将productionGzip改为true，开启Gzip压缩

二、从代码层面上优化

2.1 v-if 和 v-show的使用场景

v-if判断的是元素是否在页面中存在，而v-show是判断元素是否是显示隐藏，v-show是控制了元素的css属性display:block/none

二者的编译过程区别在于v-if是从局部进行编译/卸载，组件或元素中状态的变化会导致元素销毁或重新构建，而v-show只控制元素的css的display样式

性能消耗方面如果需要非常频繁地切换，使用v-show比较好，如果在运行时条件很少改变或需要局部功能重新加载，就用v-if比较好

2.2 computed 和 watch的使用场景

watch是属性监听，是不需要被调用的，需要在数据变化时执行异步或开销较大的操作时使用，例如在文章列表中做模糊搜索筛选功能

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，当computed中的函数所依赖的属性如果没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取，例如在购物车商品结算时，加减商品数量，一个属性受多个属性影响

2.3 v-for遍历必须为item添加key

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每一项提供一个唯一 key 属性，否则会出现乱序的情况，理想的 key 值是每项都有的唯一id，建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升

2.4 长列表性能优化

在长列表页面中，如果所有列表数据通过一个接口返回会导致页面空白时间过长，对用户体验极其不友好，所以要对列表做分页处理，首页默认展示第一页数据，滚动加载，这也是一种方案，如果列表做不了分页，那该如何处理？

使用虚拟列表的实现原理，只渲染可视区的 dom 节点，其余不可见的数据卷起来，只会渲染可视区域的 dom 节点，提高渲染性能及流畅性，优点是支持海量数据的渲染，当然滚动效果相对略差些，还可以利用函数节流方法（即控制scroll事件的处理方法）在规定时间内仅触发一次

2.5 图片资源懒加载

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验

提供一款图片懒加载工具：npm install vue-lazyload --save-dev

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

<img v-lazy="'./static/img/' + item.articleImage">

2.6 路由懒加载

不使用路由懒加载时：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

使用懒加载时：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve=>(require(["@/components/HelloWorld"],resolve))
    }
  ]
})

2.7 第三方插件的按需引入

在我们的实际项目开发中，多数是采用按需引入的模式来进行开发的，具体操作就按element-ui来讲解

首先安装babel-plugin-component，前提是安装过了element-ui

npm install babel-plugin-component -D

根据官网提示，修改.babelrc

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]]
}

在需要加载组件的页面中写入以下：

import Vue from 'vue'
import { Layout } from 'element-ui'
Vue.use(Layout)

2.8 服务端渲染 SSR和Vue预渲染

都知道远古时期的前后端对接方式是不分离的，即采用MVC开发模式，例如JavaWeb

虽然MVC模式开发有着较好的安全性，但是对开发人员来讲，需要前端人员自己编写模板语句，例如 jstl 等等，在用户访问体验上也是大打折扣

所以会诞生MVVM开发模式，这个模式可以有效地将前端和后台分工明确，大大降低了后期运营成本，但是这个模式也伴随着SEO不友好、首屏加载慢、性能方面等问题的产生

随着人们的需求升级，为了弥补缺点的不足，又推行了新模式 SSR服务端渲染 这个传统的MVC有一些相似，但具体又不同，他的出现解决了SPA单页面程序的问题，但是自身还有其他问题最终还是看我们的业务是怎样的，再选择更适合的方式

SSR对SEO更加友好，由于搜索引擎爬虫抓取的工具可以直接查看完全渲染的页面；首屏加载快，浏览器工作量大大减少，部分工作交给后端渲染执行创建；

但同时增加了上手难度，由于需要做node中间处理，需要更多文件处理分服务，和浏览端文件，对前端人员技术方面也是一个很大的考验；SSR需要webpack做打包文件打包分离处理及node Server运行环境，对开发成本也是有一定的要求

Vue预渲染在官方给出的定义：

如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

如果你使用webpack，就可以用https://github.com/chrisvfritz/prerender-spa-plugin这个工具添加预渲染