vue项目首屏加载时间优化实战


Posted in Javascript onApril 23, 2019

问题

单页面应用的一个问题就是首页加载东西过多,加载时间过长。特别在移动端,单页面应用的首屏加载优化更是绕不开的话题。下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步。

我的项目 vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax方案选用 axios,服务器使用Nginx 。用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多。

第一步:webpack-bundle-analyzer 分析

首页我们来看看没有经过任何优化的打包分析,vue-cli3的项目直接 vue-cli-service build --report 就会生成一个report.html,打开这个html就能看到,不是vue-cli3的项目需要自行安装这个插件,参考链接, 点击 。

vue项目首屏加载时间优化实战

如上图所示在vendor比较大的文件有element,moment,echart,还有jquery,然后还有一些没见过的vue-qriously这些组件,接下来我们来一步一步让vendor变小

第二步:初步优化

1. 仔细考虑组件是否需要全局引入

在我们的main.js,我发现有很多组件被全局引入,其中有些组件只有1,2个页面用到,这些组件不需要全部引入

import ImageComponent from 'COMMON/imageComponent'
import InfiniteLoading from 'COMMON/infiniteLoading'
import SearchDialog from 'COMMON/SearchDialog'
import BasicTable from 'COMMON/BasicTable'
import VueQriously from 'vue-qriously'

Vue.use(ImageComponent)
Vue.use(InfiniteLoading) // 可以去除
Vue.use(SearchDialog) // 可以去除
Vue.use(BasicTable) // 可以去除
Vue.use(VueQriously) // 可以去除

上面一段代码是我们main.js中的代码,其中ImageComponent是用来处理图片的,用到的页面很多,其他的组件都只要较少的页面用到,我们在main.js中删除,移到具体的页面中去。

2. 手动引入 ECharts 各模块

默认引入 ECharts 是引入全部的```import * as ECharts from 'echarts' ```我们只需要部分组件,只需引入自己需要的部分。参考地址, 点击

import VueECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'

3.使用更轻量级的工具库

moment是处理时间的标杆,但是它过于庞大且默认不支持tree-shaking,而且我们的项目中只用到了moment(), format(), add(), subtract()等几个非常简单的方法,有点大材小用,所以我们用 date-fns 来替换它,需要什么方法直接引入就行。

vue项目首屏加载时间优化实战

经过上面的三步初步优化,我们可以看到vendor.js变小了很多,去除了moment,我们项目之前echart就是按需加载的。

第三步:CDN优化

进过上面的优化,发现 Vue 全家桶以及 ElementUI 仍然占了很大一部分 vendors 体积,这部分代码是不变的,但会随着每次 vendors 打包改变 hash 重新加载。我们可以使用 CDN 剔除这部分不经常变化的公共库。我们将 vue,vue-router,vuex,axios,jquery,underscore ,使用CDN资源引入。国内的CDN服务推荐使用 BootCDN

1.首先我们在index.html中,添加CDN代码

...
<link href="https://cdn.bootcss.com/element-ui/2.7.2/theme-chalk/index.css" rel="stylesheet">
 </head>
 <body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.4/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.7.2/index.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore-min.js"></script>
 </body>
</html>

2.在vue.config.js中加入webpack配置代码,关于webpack配置中的externals,请 参考地址

configureWebpack: {
 externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'element-ui': 'ELEMENT',
  'axios': 'axios',
  'underscore' : {
   commonjs: 'underscore',
   amd: 'underscore',
   root: '_'
  },
  'jquery': {
   commonjs: 'jQuery',
   amd: 'jQuery',
   root: '$'
  }
 },
}

3. 去除vue.use相关代码

需要注意的是,通过 CDN 引入,在使用 VueRouter Vuex ElementUI 的时候要改下写法。CDN会把它们挂载到window上,因此不再使用Vue.use(xxx)

也不在需import Vue from 'vue', import VueRouter from 'vue-router' 等。

vue项目首屏加载时间优化实战

剔除全家桶和Element-ui等只有,剩下的需要首次加载 vendors 就很小了。

使用 CDN 的好处有以下几个方面

(1)加快打包速度。分离公共库以后,每次重新打包就不会再把这些打包进 vendors 文件中。

(2)CDN减轻自己服务器的访问压力,并且能实现资源的并行下载。浏览器对 src 资源的加载是并行的(执行是按照顺序的)。

第四步:检查Nginx 是否开启 gzip

如下图所示,开启了gzip后js的大小比未开启gzip的js小2/3左右,所以如果没开启gzip,感觉我们做的再多意义也不大,如何看自己的项目有没有开启gzip,如下图所示,开启了gzip,在浏览器的控制台Content-Encoding一栏会显示gzip,否则没有。Nginx如果开启gzip,请自行搜索,或者叫服务端来开启。

vue项目首屏加载时间优化实战 

vue项目首屏加载时间优化实战

第五步:检查路由懒加载

路由组件如果不按需加载的话,就会把所有的组件一次性打包到app.js中,导致首次加载内容过多,vue官方文档中也有提到, 地址 。

{
 name: 'vipBoxActivity',
 path:'vipBoxActivity',
 component(resolve) {
  require(['COMPONENTS/vipBox/vipBoxActivity/main.vue'], resolve)
 }
},
{
 path: 'buyerSummary',
 name: 'buyerSummary',
 component: () => import('VIEWS/buyer/buyerSummary/index'),
},

上面的两种引入组件的方法都是正确的,都能实现路由的懒加载。

最后

最后我们可以发现vendor.js的大小减少了很多。其中第一步到第三步我们项目中都没做,第四步和第五步我们做了。如果读者你没做,一定要注意了。最后希望这篇文字能够对大家有一点点帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
7个jQuery最佳实践
Jan 12 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
Vue详细的入门笔记
May 10 Vue.js
灵活使用console让js调试更简单的方法步骤
Apr 23 #Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 #Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 #Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 #Javascript
js继承的这6种方式!(上)
Apr 23 #Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 #jQuery
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 #Javascript
You might like
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
php全排列递归算法代码
2012/10/09 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
详解Document.Cookie
2015/12/25 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
Python实现简单的可逆加密程序实例
2015/03/05 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
十个Python程序员易犯的错误
2015/12/15 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
python如何对链表操作
2020/10/10 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
python pygame 愤怒的小鸟游戏示例代码
2021/02/25 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
英文版银行求职信
2013/10/09 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
中学生检讨书1000字
2014/10/28 职场文书
人力资源部岗位职责
2015/02/11 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书