详解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 相关文章推荐
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
js检测用户输入密码强度
Oct 22 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
Vuex实现数据共享的方法
Dec 20 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
vue动态配置模板 'component is'代码
2019/07/04 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
应届生求职推荐信
2013/10/28 职场文书
学生处主任岗位职责
2013/12/01 职场文书
项目计划书范文
2014/01/09 职场文书
打架检讨书500字
2014/01/29 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
不同意离婚上诉状
2015/05/23 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python