详解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 相关文章推荐
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
Python for循环及基础用法详解
2019/11/08 Python
python 实现多维数组(array)排序
2020/02/28 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
教室标语大全
2014/06/21 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
投资合作意向书范本
2015/05/08 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript