Vue项目的性能优化之路

转载自 https://www.jianshu.com/p/40b04701c571

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

“你说一下性能优化的手段”。百分之八十的人都会说，压缩js和css之类的。显然这些都是必须作的，并且已经根本不是主要的性能优化的关键点。若是你只会说这些，只能说明你是个过期的前端工程师。

性能优化过程当中，咱们须要面对的更可能是DMS解析过程，服务器缓存和浏览器缓存机制。

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]\."; 

服务器缓存

为了提升服务器获取数据的速度，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的时间格式。

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

参考资料：

• HTTP缓存深刻实践
• 掌握缓存，再也不让你蓝瘦香菇

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

参考PaicFE／vue-multi中的配置文件webpack.dll.config.js的写法。

预加载

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

DNS prefetch 分析这个页面须要的资源所在的域名，浏览器空闲时提早将这些域名转化为 IP 地址，真正请求资源时就避免了上述这个过程的时间。----HTML5 prefetch

因为域名转换成为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'> 

vue组件keep-alive

若是你作用一个大型web的spa的时候，你有不少router，对应的是不少个页面。在页面的快速切换中，为了保证页面加载的效率，除了缓存机制以外，vue的keep-alive组件能够帮的上忙。

它会把组件保存在浏览器内存当中，方便你快速切换。

百度的lavas项目中就在vue-router当中使用keep-alive的组件，用它包裹着router-view。使用了keep-alive的组件内的数据将会保留，“是否须要从新同步数据”能够在vue-router的钩子中路由所带的参数执行判断。

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替换称为mzabriskie/axios和webmodules/jsonp。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()则是返回并行请求中最早返回的请求的那个结果。它们的使用能够有效地压缩数据获取的时间。

扩展阅读

• html的meta总结，html标签中meta属性使用介绍
• 使用 webpack 3 构建高性能的应用程序

做者：brandonxiang 连接：https://www.jianshu.com/p/40b04701c571