vue前端项目优化方式

压缩js和css之类的。显然这些都是必须做的，而且已经根本不是主要的性能优化的关键点。

一、 gzip压缩

web前端项目，静态资源基本都放在cdn上，gzip的压缩是非常必要的，它直接改变了js文件的大小，减少两到三倍。
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]\.";

二 服务器缓存

为了提高服务器获取数据的速度，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;
}

三 浏览器缓存

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

HTTP 1.0

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

HTTP 1.1

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

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字符串，是标识资源的状态。它由服务端产生来判断文件是否有更新。

四 代码分包

因为vue的脚手架搭建的项目，webpack的配置当中就包含了压缩js，css和html的压缩。所以，当我们的单页面越做越大的情况下，首要的一步就是分包。

两种分包的方法：

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文件夹底下，以便于代码部署。

五 预加载

预加载技术（prefetch）是在用户需要前我们就将所需的资源加载完毕。主要针对chrome
由于域名转换成为IP的过程是非常耗时的一个过程，DNS prefetch可以减少这部分的时间。

六 vue层面

骨架屏
组件缓存
使用keep-alive提高页面加载效率，把组件缓存到浏览器内核，方便快速切换页面
http缓存

合理使用HTTP的缓存机制，让浏览器把数据缓存到本地，再次加载同样的数据的时候，无需再向服务器请求文件，直接可以从本地缓存中读取，减少读取时间。

HTTP请求中合理添加 Expires 或 cache-control 报文头

路由懒加载
减少首屏加载时间，切换到对应模块再进行加载

字体图标替换图片
好处不失真，在服务器上减少图片的请求，方便修改

样式和方法复用
销毁定时器和控件
减少对应的get，set，在vue发布通知时候减少工作量，在离开路由进行销毁，解绑事件，通过vm.$off()
释放iframe的内存

IE在iframe元素的回收方面存在着bug，需要手动将其释放以避免内存泄漏
在离开页面时候将 iframe指向变为空