Vue SPA项目优化小记_weixin_34319999的博客-CSDN博客
Vue SPA项目优化小记
weixin_34319999
于 2018-06-01 12:49:00 发布
324
收藏
文章标签：
javascript
webpack
运维
ViewUI
原文链接：https://yq.aliyun.com/articles/610261
版权
概述
之前做了一个React项目和Vue的项目，在做完后不加任何优化的情况下，这2个项目的首屏加载平均时间居然达到了20+s，好一点能进10s，差一点快30s，完全不能忍，优化势在必行，本文章记录下Vue项目的优化过程，React项目的优化后续补上。
上图是Vue项目的首页，整个项目由vue-cli搭建，主要分为4个模块，见页面左侧导航栏，总体代码量不算太大，组件的话总共50个左右吧，项目结构见下图，不算特别大的项目，但是首屏加载时间居然这么慢。
首先得确定到底是哪里导致了首屏渲染如此之慢？打开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代码，作用是防止修改了代码但是没有修改第三方库文件导致第三方库文件也打包的问题。 
网上一番搜索，发现优化点主要在如下几个方面:
开启gzip压缩功能引入CDN路由懒加载某些第三方组件按需加载而不是全部加载较小的图片资源用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开启成功
引入CDN
CDN(内容分发网络)，是一种公共服务，他本身有很多台位于不同地域、接入不同运营商的服务器，而所谓的使用CDN实质上就是让CDN作为网站的门面，用户访问到的是CDN服务器，而不是直接访问到网站。由于CDN内部对TCP的优化、对静态资源的缓存、预取，加上用户访问CDN时，会被智能地分配到最近的节点，降低大量延迟，让访问速度可以得到很大提升
一个原则是尽量将比较大的第三方库放到cdn上去以减少请求时间，在我的项目中，我将vue,vuex,vue-router,echarts都放到了cdn上，具体操作是打开BootCDN 然后搜索关键字并copy链接粘贴到index.html的body闭合标签前，如下图 注意选取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这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。 Vue官网的示例如下，采用异步组件和webpack的code-splitting结合
因此在项目中，进入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，如下图红框内
第三方按需加载
比如本项目里面使用的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上
这是最初的优化策略，后续继续会进行深度优化。
ps：webpack-bundle-analyzer是神器，能够有效分析出包占用的体积情况~下图是最终优化后的包组成结构图，最初打包的结构图比下图大很多，主要多了echarts,vue,vue-router,vuex模块
优化后的整个包gzip后大小喜人~
概述
之前做了一个React项目和Vue的项目，在做完后不加任何优化的情况下，这2个项目的首屏加载平均时间居然达到了20+s，好一点能进10s，差一点快30s，完全不能忍，优化势在必行，本文章记录下Vue项目的优化过程，React项目的优化后续补上。
上图是Vue项目的首页，整个项目由vue-cli搭建，主要分为4个模块，见页面左侧导航栏，总体代码量不算太大，组件的话总共50个左右吧，项目结构见下图，不算特别大的项目，但是首屏加载时间居然这么慢。
首先得确定到底是哪里导致了首屏渲染如此之慢？打开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代码，作用是防止修改了代码但是没有修改第三方库文件导致第三方库文件也打包的问题。 网上一番搜索，发现优化点主要在如下几个方面:
开启gzip压缩功能引入CDN路由懒加载某些第三方组件按需加载而不是全部加载较小的图片资源用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开启成功
引入CDN
CDN(内容分发网络)，是一种公共服务，他本身有很多台位于不同地域、接入不同运营商的服务器，而所谓的使用CDN实质上就是让CDN作为网站的门面，用户访问到的是CDN服务器，而不是直接访问到网站。由于CDN内部对TCP的优化、对静态资源的缓存、预取，加上用户访问CDN时，会被智能地分配到最近的节点，降低大量延迟，让访问速度可以得到很大提升
一个原则是尽量将比较大的第三方库放到cdn上去以减少请求时间，在我的项目中，我将vue,vuex,vue-router,echarts都放到了cdn上，具体操作是打开BootCDN 然后搜索关键字并copy链接粘贴到index.html的body闭合标签前，如下图
注意选取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这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。 Vue官网的示例如下，采用异步组件和webpack的code-splitting结合
因此在项目中，进入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，如下图红框内
第三方按需加载
比如本项目里面使用的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上
这是最初的优化策略，后续继续会进行深度优化。ps：webpack-bundle-analyzer是神器，能够有效分析出包占用的体积情况~下图是最终优化后的包组成结构图，最初打包的结构图比下图大很多，主要多了echarts,vue,vue-router,vuex模块
优化后的整个包gzip后大小喜人~
原文发布时间：2018-07-02
原文作者：超级索尼子
本文来源
掘金如需转载请紧急联系作者
weixin_34319999
关注
关注
点赞
收藏
评论
Vue SPA项目优化小记
概述之前做了一个React项目和Vue的项目，在做完后不加任何优化的情况下，这2个项目的首屏加载平均时间居然达到了20+s，好一点能进10s，差一点快30s，完全不能忍，优化势在必行，本文章记录下Vue项目的优化过程，React项目的优化后续补上。上图是Vue项目的首页，整个项目由vue-cli搭建，主要分为4个模块，见页面左侧导航栏，总体代码量不...
复制链接
扫一扫
vue实现路由懒加载及组件懒加载的方式
10-16
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下
使用vue-cli搭建SPA项目
weixin_45174537的博客
08-26
87
什么是vue-cli?
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下：
vue init webpack xxx
【注1】xxx 为自己创建项目的名称
【注2】必须先安装vue,vue-cli，webpack，node等一些必要的环境
安装vue-cli
在cmd执行命令：
npm install -g vue-cli
安装成功后在
E:\...
参与评论
您还未登录，请先
登录
后发表或查看评论
Vue——SPA展示性能优化方案
最新发布
ZKH129的博客
06-18
65
Vue首屏优化方案
Vue路由
weixin_44557427的博客
08-24
153
一、Vue路由：
1. SPA是什么
单页Web应用（single page application，SPA），就是只有一个Web页面的应用，
是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序
单页面应用程序：
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统...
Vue路由SPA介绍
qq_64230952的博客
04-29
394
SPA是什么
单页Web应用（single page application，SPA），就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序
单页面应用程序：
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势
减少了请求体积，...
基于Vue的SPA如何优化页面加载速度
weixin_30437481的博客
06-08
495
常见的几种SPA优化方式
减小入口文件体积
静态资源本地缓存
开启GZip压缩
使用SSR
.....
减小入口文件体积，常用的手段是路由懒加载，开启路由懒加载之后，待请求的页面会单独打包js文件，使得入口文件index.js变小，开启懒加载之后，js是这样请求加载的：
2. 静态文件本地缓存有两种方式
HTTP缓...
基于 vue 全家桶的 spa 项目模板
程序员
01-31
1678
项目简介Github: https://github.com/hanan198501/vue-spa-template最近在给团队做前端技术改造，移动端方面主要使用 vue2.0 重构，这是基于 vue-cli 脚手架生成项目模板。我们做了一些改造，加入了 vue-router ，vuex 等配套设施，本地 dev server 中加入了接口 mock 功能，还增加一个 build server 来
基于vue构建的spa项目总结(一)
liajoy的博客
12-09
3908
作为学习前端第一个完整的项目，有必要记录一下这两个月来的心得和踩过的坑。前言项目为一个工业大数据spa，功能主要为csv上传与管理，基于csv进行的表格绘制与相关基于echarts的图表绘制。
使用到的技术有vue、vue-router、vuex、vue-resource、sass。
本文分为3个部分:路由设置，组件书写，全局变量与本地储存。项目结构
project
src
component
一个vue 项目常用的cdn资源
tengxi_5290的博客
01-10
613
<!-- vue -->
<script src="https://unpkg.com/vue@2.5.2/dist/vue.min.js"></script>
<!-- vue router -->
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue...
vue-cli项目使用CDN资源
for_weber的博客
10-19
5071
众所周知web页面使用CDN的优势，常规html文件直接用script标签引入即可。近期的vue+webpack项目也需要用的CDN，客户有自己的插件API，需要CDN引入。
vue+webpack，常规插件都已经安装了依赖包，因此可以通过require的方式按需引入。那么CDN文件也想用require的方式引入的话，就需要用到webpack的external模块...
vue-cli3单页构建大型项目方案
weixin_44953136的博客
04-07
405
一、vue-cli3单页面构建方案
1、在目标文件夹内执行
vue ui ; 一个ui版界面，用于创建vue项目；
2、打开router文件夹内的index，看情况配置router的模式，是默认的hash还是history？
ps:个人推介history模式，因为内嵌如app的H5页面的话，有可能某些app是不允许页面上带有’#'的，而hash会在url上利用#来做路由转发。
ps:histor...
使用vue开发微信公众号下SPA站点的填坑之旅
weixin_34362875的博客
01-31
106
原文见我的博客，点击进入使用vue开发微信公众号下SPA站点的填坑之旅
本文为我创业过程中，开发项目的填坑之旅。作为一个技术宅男，我的项目是做一个微信公众号，前后端全部自己搞定，不浪费国家一分钱^_^。
我决定实现如下功能
架构上，实现前后端分离。方便以后前后端的分工
考虑到体验，前端做成SPA站点，也就是单页面应用
需要使用微信的JS...
Vue的SPA 如何优化加载速度
LuckXinXin的博客
09-25
214
减少入口文件体积
静态资源本地缓存
开启Gzip压缩
使用SSR,nuxt.js
vue项目引入cdn资源及配置
热门推荐
weixin_43817709的博客
08-11
1万+
1.首先在index.html加入cdn资源
<script src="//cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.5.3/vue-router.min.js"></script>
&l...
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
weixin_34319999
CSDN认证博客专家
CSDN认证企业博客
码龄7年
暂无认证
156
原创
周排名
113万+
总排名
105万+
访问
等级
6456
积分
4069
粉丝
167
获赞
评论
1021
收藏
私信
关注
热门文章
IDEA添加JavaDOC注释 方法 快捷键
14847
(?=a)与(?!a)代表什么意思
13400
shell脚本将命令的结果赋值给变量的2种写法
9940
js删除对象里的某一个属性
9933
Maven POM
9774
最新评论
[Vue warn]: <transition-group> children must be keyed: <ElTag>
qq_22160985:
虽然回答是正确的，但不能完全解决问题，还有一种情况是v-if ,v-else所绑定的dom元素相同的情况下，也会出现这个错误，应该在el-select上增加key值，不是增加value-key
VS Code + webpack 调式 lodash 源码（如何用VS Code调式ES6代码）
无休止的bug:
配置部分写的有问题，应该改成
module: {
rules: [
{ test: /.js$/, use: 'babel-loader' }
【效率】让你mac的终端飞起来（专治：npm wget curl git brew docker 等命令超时的疑难杂症）...
gmyue:
大佬，显示这个：代理渠道错误: Forwarding failure无法建立 SSL 连接。可咋整呢
OpenWRT嵌入式Linux故障排除一例
kof98765:
虽然我是搞嵌入式开发的，但没明白wifi硬件和大数据有个啥关系。。
mysql触发器的使用 想让b字段在更新的时候把旧数据保存到a字段中
康康我的大头:
请问怎么设置固定name字段更新时才触发呢，现在更新其他字段也会触发触发器
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
链表逆序输出
TIP
生成DirectUI 控件树的设计过程
2019年377篇
2018年696篇
2017年953篇
2016年524篇
2015年432篇
2014年353篇
2013年296篇
2012年270篇
2011年222篇
2010年150篇
2009年133篇
2008年104篇
2007年70篇
2006年44篇
2005年23篇
2004年8篇
目录
目录
最新文章
链表逆序输出
TIP
生成DirectUI 控件树的设计过程
2019年377篇
2018年696篇
2017年953篇
2016年524篇
2015年432篇
2014年353篇
2013年296篇
2012年270篇
2011年222篇
2010年150篇
2009年133篇
2008年104篇
2007年70篇
2006年44篇
2005年23篇
2004年8篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值