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 图片资源
对付图片过多的页面，为了加速页面加载速率，以是很多时候我们须要将页面内未涌如今可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对付页面加载性能上会有很大的提升，也提高了用户体验
供应一款图片
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这个工具添加预渲染
