问题

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

我的项目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的项目需要自行安装这个插件，参考链接，点击。

如上图所示在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 来替换它，需要什么方法直接引入就行。

经过上面的三步初步优化，我们可以看到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' 等。

剔除全家桶和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，请自行搜索，或者叫服务端来开启。

第五步：检查路由懒加载

路由组件如果不按需加载的话，就会把所有的组件一次性打包到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的大小减少了很多。其中第一步到第三步我们项目中都没做，第四步和第五步我们做了。如果读者你没做，一定要注意了。最后希望这篇文字能够对大家有一点点帮组

vue项目首屏加载优化实战的更多相关文章

Vue SPA 首屏加载优化实践
写在前面本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui ...
vuejs学习之项目打包之后的首屏加载优化
vuejs学习之项目打包之后的首屏加载优化一:使用CDN资源我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例 ...
react 首屏加载优化
react 首屏加载优化,原本是在入口HTML文件中加载loading动画,但是部署在测试环境上的时候一直无法显示loading的部分,也是奇怪了,我们测试环境的部署一直跟本地的都不太一样,内外网的转 ...
vue首屏加载优化
库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前首先我们在正常情况下build 优化 1. 按需加载当前流行 ...
vue实现首屏加载等待动画避免首次加载白屏尴尬
0 直接上效果图 1背景,用户体验良好一直是个重要的问题. 2怎么加到自己项目里面? 复制css html代码到自己的index.html即可代码链接源码地址 Vue学习前端群493671066, ...
Vue项目优化首屏加载速度
Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢一.路由的懒加载路由懒加载也就是把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 ...
Vue优化首屏加载
背景: 使用vue + iview搭建的一个后台管理系统,路由已经用了懒加载,加载登陆页面,居然还是需要18S左右,刚到一个新公司,项目经理很委婉的说,看看能不能优化了一下.然后就开始了网上一大堆'v ...
SPA 首屏加载性能优化之 vue-cli3 拆包配置
前言现在已经是vue-cli3.x webpack4.x 的时代了,但是网上很多拆包配置还是一些比较低版本的. 本文主要是分享自己的拆包踩坑经验. 主要是用了webpack4 的 splitC ...
vue cli3.0 首次加载优化
项目经理要求做首页加载优化,打包后从十几兆优化到两兆多,记下来怕下次忘记运行report脚本可看到都加载了那些内容,在从dist文件中index.html 查看首次加载都加载了那些东西,如下图:然 ...

随机推荐

【双连通分量】Bzoj2730 HNOI2012 矿场搭建
Description 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤点设立救援出口,使得无论哪一 ...
在openjdk8下看Unsafe源码
尽管有传言JAVA9可能会移除Unsafe类,但不妨碍我们理解它的原理.因为类不在了,native方法还在那里.就像菜换样了,食材就那些没变.一个好厨师不仅仅需要会做菜,还需要能识别食材特性...来吧 ...
汽车之家汽车品牌Logo信息抓取 DotnetSpider实战[三]
一.正题前的唠叨第一篇实战博客,阅读量1000+,第二篇,阅读量200+,两篇文章相差近5倍,这个差异真的令我很费劲,截止今天,我一直在思考为什么会有这么大的差距,是因为干货变少了,还是什么原因,一 ...
【原】js数组对象去重最简单的方法
简单的数组去重是比较简单的,方法也特别多,如给下面的数组去重: let arr = [1,2,2,4,9,6,7,5,2,3,5,6,5] 最常用的可以用for循环套for循环,再用splice删除重 ...
【STM32H7教程】第7章 STM32H7下载和调试方法（IAR8）
完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第7章 STM32H7下载和调试方法(IAR8) 本 ...
JVM 第一次学习总结（2019年4月）
1.内存模型起源:在计算机系统,加入了一层读写速度尽可能接近处理器运算速度的高速缓存来作为内存和处理器之间的缓冲. 问题:缓存一致性.在多处理器系统中,每个处理器都有自己的高速缓存(抽象为工作内存) ...
hive新建分区表
hive新建分区表语句如下: create table table_name (col1_name string comment '备注1', col2_name string comment '备注 ...
百度病了，必应挂了，Yandex疯了。
前天一篇<搜索引擎百度已死>的文章火遍了互联网圈.文中作者指出如今的百度搜索首页一大半都是百度自家的产品,比如你搜索特普朗,你会发现第一页的结果分别是:百度百科.贴吧.百家号.百家号.百家 ...
Python中使用枚举类
开发中我们经常定义常量, 其实有更好的方法:为这样的枚举类型定义一个class类型,然后,每个常量都是class的一个唯一实例.Python中提供了Enum类来实现这个功能: from enum im ...
Django学习之十三：提高页面开发效率减少冗余的模板系统
目录 Django 模板模板语法逻辑语法函数式过滤器内置filter 功能tag 注释内置tag 导入三方tag and filter(load) 过滤器和功能tag的区别自定义tag和f ...

vue项目首屏加载优化实战

问题