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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
vue.js 使用原生js实现轮播图
Apr 26 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和ACCESS写聊天室(五)
2006/10/09 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
javascript中call和apply方法浅谈
2013/09/27 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
python新手学习可变和不可变对象
2020/06/11 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
中秋寄语大全
2014/04/11 职场文书
施工安全生产承诺书
2014/05/23 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
委托书如何写
2014/08/30 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
2015年派出所工作总结
2015/04/24 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
会议室使用管理制度
2015/08/06 职场文书
单位病假条范文
2015/08/17 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
数据库连接池
2021/04/06 MySQL
MySQL七大JOIN的具体使用
2022/02/28 MySQL