浅谈Vue SPA 首屏加载优化实践


Posted in Javascript onDecember 15, 2017

写在前面

本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案!

我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui , ajax方案选用 axios, 并引入vuex ,使用 vuex-router-sync 将 router 同步到 store ,服务器使用本地Nginx服务。

构建项目

vue-init webpack vue-spa-starter-kit
cd vue-spa-starter-kit
npm install
npm install vuex element-ui axios -S
npm run dev

vue-cli会自动打开浏览器,可以看到效果。我们在入口文件中引入vue-router、element-ui、axios

// src/main.js
import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import axios from 'axios'
import store from './store'
import router from './router'
import {sync} from 'vuex-router-sync'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.prototype.$http = axios

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: '#app',
 store,
 router,
 template: '<App/>',
 components: { App }
})

接下来我们不做任何修改,使用默认的配置进行打包,Nginx采用默认配置,部署到Nginx,启动Nginx服务,查看效果:

浅谈Vue SPA 首屏加载优化实践

可以看出,在没有开发任何页面及功能的情况下,vendor.js 有788kb。如果我们再依赖一些其他的库,比如 echarts 等,vendor.js 能到 1M 以上。

使用CDN资源

我们要将 vue、 vue-router、 vuex、element-ui 从 vendor.js 中分离出来,使用CDN资源引入。国内的CDN服务推荐使用 BootCDN。国外不是很好用。。。

首先在模板文件index.html中添加以下内容:

...
<head>
 <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="external nofollow" >
</head>
<body>
 <div id="app"></div>
 <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
 <!-- built files will be auto injected -->
</body>

修改 build/webpack.base.conf.js。关于 externals 配置项请自行查阅相关资料。

module.exports = {
 ...
 externals: {
  'vue': 'Vue',
  'vuex': 'Vuex',
  'vue-router': 'VueRouter',
  'element-ui': 'ElementUI'
 }
 ...
}

修改 src/router/index.js

// import Vue from 'vue'
import VueRouter from 'vue-router'
// 注释掉
// Vue.use(VueRouter)
...

修改 src/store/index.js

...
// 注释掉
// Vue.use(Vuex)
...

修改 src/main.js

import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import axios from 'axios'
import store from './store'
import router from './router'
import {sync} from 'vuex-router-sync'
import ELEMENT from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ELEMENT)
Vue.prototype.$http = axios

sync(store, router)

/* eslint-disable no-new */
new Vue({
 el: '#app',
 store,
 router,
 template: '<App/>',
 components: { App }
})

注意!这里 element-ui 变量名要使用 ELEMENT,因为element-ui的 umd 模块名是 ELEMENT

再次打包,部署到Nginx服务,可以看到:

浅谈Vue SPA 首屏加载优化实践

vendor.js 减少到了 112kb,提升85.5%!

再看CDN资源:

浅谈Vue SPA 首屏加载优化实践

可以看出,5个请求共216kb,耗时619ms!

Nginx 开启 gzip

对 vendor.js 我们优化完了,接下来我们优化服务器上的资源。先看看没有开启 gzip 的效果:

浅谈Vue SPA 首屏加载优化实践

可以看到有 13.5kb

Nginx开启gzip,修改nginx配置文件 nginx.conf:

...
http {
  ...
  gzip        on;
  gzip_min_length  1k;
  gzip_buffers    4 16k;
  #gzip_http_version 1.1;
  gzip_comp_level  2; # 压缩级别
  # 要压缩的mine类型
  gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss image/jpeg image/gif image/png image/svg+xml;
  gzip_vary     off;
  gzip_proxied    expired no-cache no-store private auth;
  gzip_disable    "MSIE [1-6]\."; # IE6不支持gzip
  ...
}

关于 nginx gzip,请自行查阅相关资料

重启nginx服务,再看效果:

浅谈Vue SPA 首屏加载优化实践

可以看到服务器上的资源经过gzip压缩之后有 9kb,压缩比 13.3%。

总结

至此,我们初步的优化就完成了。我实际的项目首屏加载从 12s 左右优化到 4s 左右。由于是演示项目,并没有开发其他的页面和功能,效果不是很明显,大家可以自行踩坑。大家有更好的方案,可以共同学习!

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

Javascript 相关文章推荐
jquery键盘事件介绍
Jan 31 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 #Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 #Javascript
JavaScript原生实现观察者模式的示例
Dec 15 #Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 #Javascript
ReactNative中使用Redux架构总结
Dec 15 #Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 #Javascript
vue实现验证码输入框组件
Dec 14 #Javascript
You might like
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php实现telnet功能示例
2014/04/08 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
举例讲解Python常用模块
2019/03/08 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
丧事主持词
2015/07/02 职场文书
全民创业工作总结
2015/08/13 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
python基础入门之普通操作与函数(三)
2021/06/13 Python
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python