之前做了一个反应项目和Vue的项目,在做完后不加任何优化的情况下,这2个项目的首屏加载平均时间居然达到20 + s了,好一点能进十年代,差一点快30年代,完全不能忍,优化势在必行,本文章记录下Vue项目的优化过程,反应项目的优化后续补上。
上图是Vue项目的首页,整个项目由vue-cli搭建,主要分为4个模块,见页面左侧导航栏,总体代码量不算太大,组件的话总共50个左右吧,项目结构见下图,不算特别大的项目,但是首屏加载时间居然这么慢。
首先得确定到底是哪里导致了首屏渲染如此之慢?打开Chrome网络面板,勾上禁用缓存选项,刷新页面观察资源加载情况,发现罪魁祸首就是webpack打包生成的app.js和vendor.js,其中vendor.js大小达到了1.2米,下载时间超过20秒,app.js也快到1米,而manifest.js不是很大.vendor.js主要是把node_modules里所用到的模块都合并成一个js了,所以比较大。而我们也希望将业务代码和第三方引用分开打包。<代码>清单。js>
网上一番搜索,发现优化点主要在如下几个方面:
-
<李>开启gzip压缩功能李
<李>引入CDN李
<李>路由懒加载李
<李>某些第三方组件按需加载而不是全部加载李
<李>较小的图片资源用base64嵌入src中,减少http请求李
<强> gzip压缩
gzip是GNUzip的缩写,最早用于UNIX系统的文件压缩.北京协议上的gzip编码是一种用来改进网络应用程序性能的技术,web服务器和客户端(浏览器)必须共同支持gzip。目前主流的浏览器,Chrome, firefox、IE等都支持该协议。常见的服务器如Apache, Nginx, IIS同样支持,gzip压缩效率非常高,通常可以达到70%的压缩率,也就是说,如果你的网页有30 k,压缩之后就变成了9 k左右
我后端是用的表达,开启gzip非常简单,首先npm安装压缩安装中间件,然后在app.js里添加使用使用即可:
重启服务,观察网络面板里面的响应头,如果看到如下红圈里的字段则表明gzip开启成功
CDN(内容分发网络),是一种公共服务,他本身有很多台位于不同地域,接入不同运营商的服务器,而所谓的使用CDN实质上就是让CDN作为网站的门面,用户访问到的是CDN服务器,而不是直接访问到网站。由于CDN内部对TCP的优化,对静态资源的缓存,预取,加上用户访问CDN时,会被智能地分配到<强>最近的节点,降低大量延迟,让访问速度可以得到很大提升
一个原则是尽量将比较大的第三方库放到cdn上去以减少请求时间,在我的项目中,我将vue, vuex, vue-router, echarts都放到了cdn上,具体操作是打开BootCDN然后搜索关键字并复制链接粘贴到index . html的身体闭合标签前,如下图
注意选取min.js(体积最小),然后在webpack.base.conf.js里设置外表选项,目的是不打包这些选项,由于index . html中脚本的引入,比如vue就会有一个全局变量vue存在,因此这里外部的价值就是vue
cdn使用后优势是巨大的,观察网面板,时间几乎都在50毫秒以下
路由懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了加载也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。
