详解Vue SPA项目优化小记


Posted in Javascript onJuly 03, 2018

概述

之前做了一个React项目和Vue的项目,在做完后不加任何优化的情况下,这2个项目的首屏加载平均时间居然达到了20+s,好一点能进10s,差一点快30s,完全不能忍,优化势在必行,本文章记录下Vue项目的优化过程,React项目的优化后续补上。

详解Vue SPA项目优化小记

上图是Vue项目的首页,整个项目由vue-cli搭建,主要分为4个模块,见页面左侧导航栏,总体代码量不算太大,组件的话总共50个左右吧,项目结构见下图,不算特别大的项目,但是首屏加载时间居然这么慢。

详解Vue SPA项目优化小记

首先得确定到底是哪里导致了首屏渲染如此之慢?打开Chrome Network面板,勾上Disable cache选项,刷新页面观察资源加载情况,发现罪魁祸首就是webpack打包生成的app.js和vendor.js,其中vendor.js大小达到了1.2M,下载时间超过20秒,app.js也快到1M,而manifest.js不是很大。vendor.js主要是把node_modules里所用到的modules都合并成一个js了,所以比较大.而我们也希望将业务代码和第三方引用分开打包。 manifest.js 包含webpack的runtime代码和module manifest代码,作用是防止修改了代码但是没有修改第三方库文件导致第三方库文件也打包的问题。

网上一番搜索,发现优化点主要在如下几个方面:

  1. 开启gzip压缩功能
  2. 引入CDN
  3. 路由懒加载
  4. 某些第三方组件按需加载而不是全部加载
  5. 较小的图片资源用base64嵌入src中,减少http请求

具体优化

gzip压缩

gzip是GNUzip的缩写,最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术,web服务器和客户端(浏览器)必须共同支持gzip。目前主流的浏览器,Chrome,firefox,IE等都支持该协议。常见的服务器如Apache,Nginx,IIS同样支持,gzip压缩效率非常高,通常可以达到70%的压缩率,也就是说,如果你的网页有30K,压缩之后就变成了9K左右

我后端是用的express,开启gzip非常简单,首先npm install compression安装中间件,然后在app.js里添加use使用即可:

var compression = require('compression');
var app = express();
app.use(compression())

重启服务,观察网络面板里面的response header,如果看到如下红圈里的字段则表明gzip开启成功

详解Vue SPA项目优化小记

引入CDN

CDN(内容分发网络),是一种公共服务,他本身有很多台位于不同地域、接入不同运营商的服务器,而所谓的使用CDN实质上就是让CDN作为网站的门面,用户访问到的是CDN服务器,而不是直接访问到网站。由于CDN内部对TCP的优化、对静态资源的缓存、预取,加上用户访问CDN时,会被智能地分配到 最近 的节点,降低大量延迟,让访问速度可以得到很大提升

一个原则是尽量将比较大的第三方库放到cdn上去以减少请求时间,在我的项目中,我将vue,vuex,vue-router,echarts都放到了cdn上,具体操作是打开BootCDN 然后搜索关键字并copy链接粘贴到index.html的body闭合标签前,如下图

详解Vue SPA项目优化小记

注意选取min.js(体积最小),然后在webpack.base.conf.js里设置externals选项,目的是不打包这些选项,由于index.html中script的引入,比如vue就会有一个全局变量Vue存在,因此这里external的value就是Vue

externals: {
 'vue': 'Vue',
 'vuex': 'Vuex',
 'vue-router': 'VueRouter',
 'echarts': 'echarts'
 },

cdn使用后优势是巨大的,观察network面板,时间几乎都在50ms以下

详解Vue SPA项目优化小记

路由懒加载

路由懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。

Vue官网的示例如下,采用异步组件和webpack的code-splitting结合

详解Vue SPA项目优化小记

因此在项目中,进入router的index.js中,将原来的 import Comp from '@/component/xxx' 改为如下,vue-router的配置项还是保持不变

//异步组件,路由懒加载
const BookMark = resolve => require(['@/components/BookMark'],resolve);
const HotBookMark = resolve => require(['@/components/HotBookMark'],resolve);
const ImportBookMark = resolve => require(['@/components/ImportBookMark'],resolve);
const Default = resolve => require(['@/components/Default'],resolve);

打包后查看js文件夹下的文件,会多出上述文件,每个进行懒加载的组件都会生成一个js,如下图红框内

详解Vue SPA项目优化小记

第三方按需加载

比如本项目里面使用的echarts,只用到了一个柱状图组件,其余的都没有用到,但是这样import后打包时却会把整个echarts都打入包内,造成空间浪费

import echarts from 'echarts'

因此只需要import用到的组件即可,如下,这样就可以减少很多不必要的体积

import echarts from 'echarts/lib/echars'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'

图片转base64

小图片可以转为base64字符串然后嵌入img的src中,节省http请求数量,webpack中用url-loader处理,limit控制了图片转base64的阈值,小于该值就转base64

{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
 },

优化后性能

经过上述优化后,首页打开时间迅速下降,DomContentLoaded用时不到1s,load完全加载用时不到4s,耗时较多的是几张背景大图,本来体积就大,后续考虑放到cdn上

详解Vue SPA项目优化小记

这是最初的优化策略,后续继续会进行深度优化。

ps:webpack-bundle-analyzer是神器,能够有效分析出包占用的体积情况~下图是最终优化后的包组成结构图,最初打包的结构图比下图大很多,主要多了echarts,vue,vue-router,vuex模块

详解Vue SPA项目优化小记

优化后的整个包gzip后大小喜人~

详解Vue SPA项目优化小记

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 #jQuery
JS实现显示当前日期的实例代码
Jul 03 #Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 #jQuery
vue 设置路由的登录权限的方法
Jul 03 #Javascript
jQuery阻止事件冒泡实例分析
Jul 03 #jQuery
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 #Javascript
Vue props用法详解(小结)
Jul 03 #Javascript
You might like
PHP概述.
2006/10/09 PHP
两个php日期控制类实例
2014/12/09 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
javascript处理table表格的代码
2010/12/06 Javascript
JavaScript 事件绑定及深入
2015/04/13 Javascript
详解JavaScript函数
2015/12/01 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
python Gabor滤波器讲解
2020/10/26 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
C#面试问题
2016/07/29 面试题
linux面试相关问题
2012/08/11 面试题
医学检验专业个人求职信范文
2013/12/04 职场文书
高中生活自我鉴定
2014/01/18 职场文书
个人股份合作协议书
2014/10/24 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
初一数学教学反思
2016/02/17 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
使用javascript解析二维码的三种方式
2021/11/11 Javascript
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL