vue优化

1.vue项目首屏加载优化
减少组件全局引入
.手动引入 ECharts 各模块
使用更轻量级的工具库

2。CDN优化
Vue 全家桶以及 ElementUI 仍然占了很大一部分 vendors 体积，这部分代码是不变的，但会随着每次 vendors 打包改变 hash 重新加载。我们可以使用 CDN 剔除这部分不经常变化的公共库。我们将vue，vue-router，vuex，axios，jquery，underscore，使用CDN资源引入。
引入，添加CDN代码
在vue.config.js中加入webpack配置代码，关于webpack配置中的externals
configureWebpack: {
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
'axios': 'axios',
'underscore' : {
commonjs: 'underscore',
amd: 'underscore',
root: '_'
},
'jquery': {
commonjs: 'jQuery',
amd: 'jQuery',
root: '$'
}
},
}

3.去除vue.use相关代码
需要注意的是，通过 CDN 引入，在使用 VueRouter Vuex ElementUI 的时候要改下写法。CDN会把它们挂载到window上，因此不再使用Vue.use(xxx)
也不在需import Vue from 'vue', import VueRouter from 'vue-router' 等。
剔除全家桶和Element-ui等只有，剩下的需要首次加载 vendors 就很小了。

使用 CDN 的好处有以下几个方面

（1）加快打包速度。分离公共库以后，每次重新打包就不会再把这些打包进 vendors 文件中。

（2）CDN减轻自己服务器的访问压力，并且能实现资源的并行下载。浏览器对 src 资源的加载是并行的(执行是按照顺序的)。

4.检查Nginx 是否开启 gzip
开启了gzip后js的大小比未开启gzip的js小2/3左右，所以如果没开启gzip，感觉我们做的再多意义也不大，如何看自己的项目有没有开启gzip，区分是否开启gizp，在浏览器的控制台Content-Encoding一栏会显示gzip，否则没有。Nginx如果开启gzip，请自行搜索，或者叫服务端来开启。

5.检查路由懒加载
路由组件如果不按需加载的话，就会把所有的组件一次性打包到app.js中，导致首次加载内容过多
{
path: 'buyerSummary',
name: 'buyerSummary',
component: () => import('VIEWS/buyer/buyerSummary/index'),
}

6.定义［nextTick、事件循环］
nextTick的由来：
　　　　由于VUE的数据驱动视图更新，是异步的，即修改数据的当下，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
　　nextTick的触发时机：
　　　　在同一事件循环中的数据变化后，DOM完成更新，立即执行nextTick(callback)内的回调。
　　应用场景：
　　　　需要在视图更新之后，基于新的视图进行操作。
　　以上出现了事件循环的概念，其涉及到JS的运行机制，包括主线程的执行栈、异步队列、异步API、事件循环的协作，此处不展开之后再总结。大致理解：主线程完成同步环境执行，查询任务队列，提取队首的任务，放入主线程中执行；执行完毕，再重复该操作，该过程称为事件循环。而主线程的每次读取任务队列操作，是一个事件循环的开始。异步callback不可能处在同一事件循环中。
　　简单总结事件循环：
　　　　同步代码执行 -> 查找异步队列，推入执行栈，执行callback1[事件循环1] ->查找异步队列，推入执行栈，执行callback2[事件循环2]...
　　即每个异步callback，最终都会形成自己独立的一个事件循环。
　　结合nextTick的由来，可以推出每个事件循环中，nextTick触发的时机：
　　　　同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发
　　tips：本文的任务队列、消息队列、异步队列指同一个东西，均指macrotask queue。

7.v-if和v-show的使用
我们都知道这两个都可以控制显隐，那我们用哪个呢，个人觉得要从两个方面入手来确定使用哪个，

1.权限的问题，只要涉及到权限相关的展示用v-if比较好

2.切换地频率，如果频繁的切换我们用v-show，不频繁的切换用v-if

其实两者各有优缺，就看你是怎么选择了，用v-if能减少页面中的DOM总数，加快渲染的速度，而且我们要清楚一个事情

v-if是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.

v-if也是惰性的,如果在初始渲染时条件为假,那么什么都不做- - 直到条件第一次为真的时候才会开始渲染条件块,相比之下,v-show

就简单得多- - 不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换.
8.使用动画时可以用CSS启动硬件加速，**

CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行,那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发 的CSS规则，可以用transform: translateZ(0); 来开启硬件加速，transform: translate3d(0, 0, 0)也可以。

9.组件懒加载，**

这个很有用的，例如，当我们在一个很长的页面时，用户可能只会去看前一两屏，那剩下没被用用户观看的组件也会被加载，这样就会浪费我们的资源，我们使用组件懒加载在阻止性能浪费

10.为item设置唯一key值，**

方便Vuex的内部机制在循环时能够准确的找到该条列表数据

11.减少watch的数据，在有可能的前提下，减少没有必要的state数据**

因为当watch的数据比较大的时候，会大量消耗性能，所以我们可以使用事件中央总线或者Vuex进行数据的变更操作

为什么要减少没有必要的state数据，这和Vue的响应式原理有关，Vue会使用 Object.defineProperty 把这些属性全部转为 getter/setter ,并建立相应的Watcher来监控，这就造成一个问题，当我们的state特别多时，对应的Watcher也就会特别多，容易造成卡顿，这也是为什么在大型项目（状态特别多）我们会选用React而不用Vue的原因

12.****图片按需加载，**这个算是基础操作了吧

13.SSR（服务端渲染） **

如果项目比较大，首屏无论怎么做优化，都出现闪屏或者一阵黑屏的情况。可以考虑使用SSR(服务端渲染)

14.骨架屏加载**

在页面加载资源较多，可能会出现白屏和闪屏的情况，体验不好，这个时候我们可以使用骨架屏

（骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉）

15.打包时的优化**

有时候我们打完包之后发现包会很大，那怎么解决这个问题呢，其实很简单，在项目中，我们不是引入了诸如axios，vuex，vue-router等的包吗，那我们将这些包剔除出去，

换用cdn直接引入到我们项目的根目录的html当中，

注意在 webpack 里有个 externals配置，可以忽略不需要打包的库
16.# 开启gzip
在所有的web前端项目，静态资源基本都放在cdn上，gzip的压缩是非常必要的，它直接改变了js文件的大小，减少两到三倍。

参考加速nginx: 开启gzip和缓存，nginx的gzip配置非常简单，在你对应的域名底下，添加下面的配置，重启服务即可。gzip_comp_level的值大于2的时候并不明显，建议设置在1或者2之间。

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

17.服务器缓存
为了提高服务器获取数据的速度，nginx缓存着静态资源是非常必要的。如果是测试服务器对html应该不设置缓存，而js等静态资源环境因为文件尾部会加上一个hash值，这可以有效实现缓存的控制。

location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ { 
  access_log   off; 
  expires      30d;
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
  access_log   off;
  expires      24h;
}
location ~* ^.+\.(html|htm)$ {
  expires      1h;
}

18.浏览器缓存
浏览器缓存是通过html的头文件中的meta来控制。http-equiv是一个专门针对http的头文件，可以向浏览器传回一些有用的信息。与之对应的content，是各个参数的变量值。

HTTP 1.0

在HTTP1.0中通过Pragma控制页面缓存，可以设置为Pragma或no-cache。在不让浏览器或中间缓存服务器缓存页面的情况下，通常设置的值为no-cache，不过这个值不这么保险，通常还加上Expires置为0来达到目的。Expires可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输获取新的页面信息。PS：内容必须使用GMT的时间格式。

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
HTTP 1.1

在HTTP1.1中通过Cache-Control控制页面缓存，可以设置为no-cache、private、no-store、max-age或must-revalidate等，默认为private。

<meta http-equiv="Cache-Control" content="no-cache">
public 浏览器和缓存服务器都可以缓存页面信息
private 对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache 浏览器和缓存服务器都不应该缓存页面信息
no-store 请求和响应的信息都不应该被存储在对方的磁盘系统中，不使用缓存
must-revalidate 对于客户机的每次请求，代理服务器必须想服务器验证缓存是否过时
max-age 客户机可以接收生存期不大于指定时间（以秒为单位）的响应
min-fresh 客户机可以接收响应时间小于当前时间加上指定时间的响应
Last-Modified和Etags

Last-Modified服务器端文件响应头，描述最后修改时间。当浏览器再次进行请求时，会向服务器传送If-Modified-Since报头，询问时间点之后资源是否被修改过，从而区分200和304的请求状态码，304则选择浏览器缓存。

Etags不同的是，ETag是根据实体内容生成一段hash字符串，是标识资源的状态。它由服务端产生来判断文件是否有更新

19.JS分包
前面说的两部分都可以说是偏后端的活，如果真的从前端方面考虑，我们可能会分包入手。正因为vue的脚手架搭建的项目，webpack的配置当中就包含了压缩js，css和html的压缩。所以，当我们的单页面越做越大的情况下，首要的一步就是分包。

vue官方称gzip压缩后只有20kb，但是你普通的打包方式也有100kb，再加上你自己的逻辑代码，整体包的体积也挺大的。直接影响首屏页面加载的效率。下面介绍一下两种分包的方法：

external 把包排除，使用cdn资源
dll 打包
vue，vuex和vue-router

在webpack配置文件中external设置，把这三个场用包排除这个操作，主要是把这三个包从vendor.js分开。

最后当然需要在html标签上添加上额外cdn的link或者script。

DLL打包

这种打包方式专门引用webpack官方的DllPlugin和DllReferencePlugin。DllPlugin会生成一个dll包的代码指纹manifest，管理额外的打包。而在项目生成的过程中，DllReferencePlugin会参考manifest的内容去打包。额外生成的js文件应该被放置在vue项目的文件当中的static文件夹底下，以便于代码部署。

20.## 预加载

预加载技术（prefetch）是在用户需要前我们就将所需的资源加载完毕，不是所有浏览器都支持，主要是Chrome浏览器。

> DNS prefetch 分析这个页面需要的资源所在的域名，浏览器空闲时提前将这些域名转化为 IP 地址，真正请求资源时就避免了上述这个过程的时间。----[HTML5 prefetch](https://www.jianshu.com/p/7f58ddfc1392)

由于域名转换成为IP的过程是非常耗时的一个过程，DNS prefetch可以减少这部分的时间。

<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://z-ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://completion.amazon.com'>
<link rel='dns-prefetch' href='http://fls-na.amazon.com'>

预加载也可以对某个静态资源起到专门的作用。

<link rel='subresource' href='libs.js'>

预渲染（pre-rendering）是这个页面会提前加载好用户即将访问的下一个页面。

<link rel='prerender' href='http://www.pagetoprerender.com'>

21.  Promise请求

es6的其中一个特性就是原生支持**promise**。在这里，我先不说异步编程里的**generator**和**aync/await**的属性。它们功能的实现都是基于promise。

Promise的特点在于：

*   减少回调函数
*   串并行处理
*   代码的优雅

这里特别讲一下，ES6在性能优化上可以使用promise或者async／await去压缩请求时间。在过去，很多jquery的页面在调用接口请求都是一个接口等另一个接口，串行执行所有请求，最后在完成最后的回调函数，如此类推。这样的写法会直接导致“回调地狱”。即使你用`vue-resource`，我也review到非常多的“回调地狱”的情况。为了从根本上解决这个问题并提高开发效率，我建议优先使用promise。（async／await不急着投入使用），考虑到还有很多同事还在高效地开发业务代码。

现在的`vue-resource`已经支持promise的写法，为了更好地让技术向后发展，我建议将[pagekit/vue-resource](https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Fpagekit%2Fvue-resource)替换称为[mzabriskie/axios](https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Fmzabriskie%2Faxios)和[webmodules/jsonp](https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Fwebmodules%2Fjsonp)。`axios`是可以同时满足服务端和浏览器端，同构的写法有助于以后将技术栈往SSR（服务端渲染）发展。`jsonp`这个库则是为了兼容jsonp的请求需要，需要对它进行了promise的封装。

export function getJsonp(urlHost, key, data, _params) {
return new Promise((resolve, reject) => {
let url = urlHost + key;
if (data) url += ?${querystring.stringify({ ...data, temp: new Date().getTime() })};
const params = _params || { timeout: 15000 };
if (!params.timeout) params.timeout = 15000;
jsonp(url, params, (err, res) => {
if (err) {
reject(err);
} else {
resolve(res);
}
});
});
}

Promise的使用需要避免以下的写法，

promise.then(function(value) {
// success
}, function(error) {
// failure
});

尽量使用链式写法，

promise.then(function(value) {
// step1
}).then(function(value){
// step2
}).catch(function(value){
// failure
})

并行的操作主要是`Promise.all()`，它可以将Promise操作的数组并行执行完成然后在进行串行的操作。`Promise.race()`则是返回并行请求中最先返回的请求的那个结果。它们的使用可以有效地压缩数据获取的时间。