vue项目首屏加载优化实战

问题

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

我的项目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的大小减少了很多。其中第一步到第三步我们项目中都没做,第四步和第五步我们做了。如果读者你没做,一定要注意了。最后希望这篇文字能够对大家有一点点帮组

原文地址:https://www.cnblogs.com/mianbaodaxia/p/10751453.html

时间: 2024-09-29 20:46:48

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

Vue SPA 首屏加载优化实践

写在前面 本文记录笔者在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 n

解决React首屏加载白屏的问题

众所周知,在项目中如果在资源加载请求还未完成的时候,由于阻塞机制,会出现首页白屏的问题,产生很差的用户体验.本文以react为例,提供一个解决方法. 解决原理:使用  onreadystatechange  去监听 readyState,在资源加载完成之前加载一个只有框架的静态页面,页面不请求数据.当数据请求完成之后再将路由切换到真实的首页. 废话不多说,上代码: main.js import React from 'react'import ReactDom from 'react-dom'i

轻松大幅度降低 Meteor App 的首屏加载时间

许多研究表明,用户最满意的网页加载时间是在2秒以下.能够忍受的较长等待时间上限大概在6-8秒之间.如果需要等待12秒,99%以上的用户会关闭网页离开. 所以如果要给用户提供愉快的使用体验,尽量做到 2 秒内打开你的网站. 问题 大家知道 Meteor App 打包之后前端的 css 和 js 文件就算压缩了也有 500KB 左右.这样如果使用自己的 web 服务器来提供这些文件加载的话,一个问题就是很慢,另外还会消耗更多的云主机流量,这可比 CDN 流量贵多了,一般云主机流量是 CDN 流量的

CSS图片加载优化方案

CSSSprite 减少对服务器请求SVGSprite 体积小,矢量Iconfont 体积小,矢量,集成度高Base64 减少对服务器请求 CSSSprite 减少对服务器请求 CSS Sprites 技术就是将这些小icon合并成一张图片,只需要加载一次,每次通过background-position来控制显示icon,这样就可以节约大量请求,节约成本.此方案是将网站上的一些小logo拼合成一个大图,如图: 然后通过 background-position 就可以定位到图标的位置了,css举例

vue router按需加载

1 import Vue from 'vue' 2 import Router from 'vue-router' 3 4 Vue.use(Router); 5 //按需加载,当渲染其他页面时才加载其组件,并缓存,减少首屏加载时间 6 const Index = resolve => require(['@/views/Index.vue'], resolve) 7 const Category = resolve => require(['@/views/Category.vue'], re

网络图片加载优化

网络图片加载优化 比如使用淘宝浏览产品的时候(大部分应用也是如此),就会发现每次下拉产品目录进行更新的时候,都会出现对应的Item的时候,才开始从网络下载并加载图片. taobao加载 可以看到宝贝图片下拉刷新的时候,图片加载是实时从网络下载的.即使在Wifi的网络环境下,加载图片也是有比较大的延迟. 假设我们浏览每屏宝贝需要2s的时间(人眼对于淘宝搜索的宝贝其实过滤速度非常快).如果每一屏页面需要1s才可以完全加载完图片,则如果浏览10屏的宝贝,就会需要30s.如果加载图片几乎不需要时间,则只

也许是被误解的浏览器资源加载优化

几乎每一个前端程序员都知道应该把script标签放在页面底部.关于这个经典的论述可以追溯到Nicholas的 High Performance Javasript 这本书的第一章Loading and Execution中,他之所以建议这么做是因为: Put all <script> tags at the bottom of the page, just inside of the closing </body> tag. This ensures that the page c

【让我们再聊聊浏览器资源加载优化】

几乎每一个前端程序员都知道应该把script标签放在页面底部.关于这个经典的论述可以追溯到Nicholas的 High Performance Javasript 这本书的第一章Loading and Execution中,他之所以建议这么做是因为: Put all <script> tags at the bottom of the page, just inside of the closing </body> tag. This ensures that the page c

[转]让我们再聊聊浏览器资源加载优化

作者 李光毅 发布于 2014年6月27日 几乎每一个前端程序员都知道应该把script标签放在页面底部.关于这个经典的论述可以追溯到Nicholas的 High Performance Javasript 这本书的第一章Loading and Execution中,他之所以建议这么做是因为: Put all <script> tags at the bottom of the page, just inside of the closing </body> tag. This e