基于Vue的单页应用，首屏加载优化方案

最新推荐文章于 2024-04-24 10:00:00 发布
最新推荐文章于 2024-04-24 10:00:00 发布
阅读量2.4k 收藏 9
点赞数 2
分类专栏： web前端 文章标签： 基于Vue的单页应用，首屏加载优化方案

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

我们以 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服务，查看效果：

 

可以看出，在没有开发任何页面及功能的情况下，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">
</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服务，可以看到：

 

vendor.js 减少到了 112kb，提升85.5%！

再看CDN资源：

 

可以看出，5个请求共216kb，耗时619ms！

Nginx 开启 gzip

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

 

可以看到有 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服务，再看效果：

 

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

总结

  • 使用CDN资源,减小服务器带宽压力
  • 路由懒加载
  • 将一些静态js css放到其他地方（如OSS），减小服务器压力
  • 按需加载三方资源，如iview,建议按需引入iview中的组件
  • 使用nginx开启gzip减小网络传输的流量大小
  • webpack开启gzip压缩
  • 若首屏为登录页，可以做成多入口，登录页单独分离为一个入口

使用CDN资源,减小服务器带宽压力

在index.html中引入cdn资源

?

1

2

3

4

5

6

7

8

9

10

11

...

 <body>

  <div id="app">

  </div>

  <!-- built files will be auto injected -->

  <script src="https://cdn.bootcss.com/vue/2.5.2/vue.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/vuex/3.0.1/vuex.min.js"></script>

  <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>

 </body>

 ...

修改 build/webpack.base.conf.js

?

1

2

3

4

5

6

7

8

9

10

11

12

13

module.exports = {

 context: path.resolve(__dirname, '../'),

 entry: {

  app: './src/main.js'

 },

 externals:{

  'vue': 'Vue',

  'vue-router': 'VueRouter',

  'vuex':'Vuex',

  'vue-resource': 'VueResource'

 },

 ...

}

修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource

?

1

2

3

// import Vue from 'vue'

// import VueResource from 'vue-resource'

// Vue.use(VueResource)

路由懒加载

?

1

2

const workCircle = r => require.ensure([], () => r(require('@/module/work-circle/Index')), 'workCircle')

const workCircleList = r => require.ensure([], () => r(require('@/module/work-circle/page/List')), 'workCircleList')

将一些静态js css放到其他地方（如OSS），减小服务器压力

注意这里的js文件，需要将结果抛出，然后在需要用到该js的组件中import引入

按需加载三方资源，如iview,建议按需引入iview中的组件

按需引用请查看iview官方文档iview

使用nginx开启gzip减小网络传输的流量大小

配置nginx，可以参考Nginx开启Gzip压缩大幅提高页面加载速度

webpack开启gzip压缩

这里需要配合Nginx服务器，Nginx开启gzip

config/index.js中

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

module.exports = {

 build: {

  ...

  // Gzip off by default as many popular static hosts such as

  // Surge or Netlify already gzip all static assets for you.

  // Before setting to `true`, make sure to:

  // npm install --save-dev compression-webpack-plugin

  productionGzip: true, // 就是这里开启gzip,vue-cli搭建项目，这里默认为false

  productionGzipExtensions: ['js', 'css'],

 

  // Run the build command with an extra argument to

  // View the bundle analyzer report after build finishes:

  // `npm run build --report`

  // Set to `true` or `false` to always turn it on or off

  bundleAnalyzerReport: process.env.npm_config_report

 }

}

build/webpack.prod.conf.js中

使用vue-cli构建项目时，默认会有这段代码

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

if (config.build.productionGzip) {

 const CompressionWebpackPlugin = require('compression-webpack-plugin')

 webpackConfig.plugins.push(

  new CompressionWebpackPlugin({

   asset: '[path].gz[query]',

   algorithm: 'gzip',

   test: new RegExp(

    '\\.(' +

    config.build.productionGzipExtensions.join('|') +

    ')$'

   ),

   threshold: 10240,

   minRatio: 0.8

  })

 )

}

若首屏为登录页，可以做成多入口，登录页单独分离为一个入口

修改webpack配置

在原先只有一个入口叫app的基础上，再加一个叫login的入口，指向另一个入口js文件；

既然是两个页面，那么原先只有一个的HtmlWebpackPlugin也需要再添加一个，并且filename和template改成登录页的；

HtmlWebpackPlugin默认会把所有资源放进html，为了去掉不需要的资源，需要在HtmlWebpackPlugin选项里分别添加excludeChunks: ['login']和excludeChunks: ['app']；

原先的某些CommonsChunkPlugin会导致报错，删掉只剩下一个manifest的CommonsChunkPlugin就好。

添加登录相关文件

添加之前配好的login入口文件，与app类似，但是去掉登录页不需要的东西，如用不到的组件和样式等；

添加login入口专用的router配置文件，去掉其他路由，只留下登录页一个就好：

只留登录路由

添加登录页的html模板，也是去掉登录里用不到的资源。

修改其他细节

登录完不是用vue-router的push方法，而是改成直接修改location.href跳到另一个页面；

去除原来app路由中的login；

登录页中可以使用隐藏的iframe等方式预加载app页面中的数据（猜想）。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

 

哎呦喂1111
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
VUE单页应用首屏加载速度优化方案
csdn_haow的博客
07-04 3247
单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方（如OSS），减小服务器压力 按需加载三方资源，如iview,建议按需引入iview中的组件 使用nginx开启gzip减小网络传输的流量大小 若首屏为登录页，可以做成多入口，登录页单独分离为一个入口 使用uglifyjs...
Web前端性能优化——如何提高页面加载速度
weixin_30677475的博客
03-19 3874
前言： 在同样的网络环境下，两个同样能满足你的需求的网站，一个“Duang”的一下就加载出来了，一个纠结了半天才出来，你会选择哪个？研究表明：用户最满意的打开网页时间是2-5秒，如果等待超过10秒，99%的用户会关闭这个网页。也许这样讲，各位还不会有太多感触，接下来我列举一组数据：Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导...
前端首屏优化 | 借助客户端能力提升 H5 首屏的 8 个手段
最新发布
Web面试那些事儿的博客
04-24 1440
之前写了一篇文章，聊到了如何根据来梳理性能优化方案，反响还不错。于是，我计划输出「前端首屏优化」专栏系列，从不同角度聊聊首屏优化实践，包括且不限于防劣化、工程体系、端能力等，欢迎关注 ✨✨。作为专栏的第一篇，本文将从客户端角度，聊聊如何借助优化前端首屏加载速度。除了方案介绍，本文还会提供数据收益、注意事项、开发成本等，以帮助大家更好的评估实现优先级，选择合适业务的方案。本文主要是经验和原理之谈，不涉及客户端代码实现，比较适合想开拓视野的。上图为通用的利用分类思维，对该流程进行。
前端如何做极致的首屏渲染速度优化
SAHADEV的专栏
12-24 2497
这里说的极致是技术上可以达到最优的性能。 首先为了降低白屏时间，可以加一个loading效果。 但拿vue项目来说，尤其是以vue-cli创建的项目来说，能做到极致并不容易。 默认vue-cli会在生成的文件头部增加很多的link，而这些link会阻碍后面脚本的处理，等这些脚本处理完才会有dom的生成以及动画的执行。所以，我们的极致目标就是让loading动画尽可能的早。 为了看出优化前优化后的效果差异，一切在浏览器的3G慢速情况下验证。 未完待续。。。 ...
从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
12-20 717
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群全文共6511字/词，阅读大概需要13分钟，太长不看党请直接移步????「开始优化」部分直接查看优化手段背景前段时间公司服...
Vue首屏加载速度如何优化提升80%？本文详解
QQ2352108083的博客
06-11 2218
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。可以看个例子： 差点忘记介绍了：我是一名08年出道的高级前端老鸟，大家如果想跟我交流学习经验，可以进我的扣扣裙 519293536 有问题我都会尽力帮大家。主要是中高级问题，小白勿进哦 这是优化前的页面加载状态：执行npm run build打包项目，出来的vendeor...
百度SSP单页式应用性能优化实践
02-25
本文将介绍其中一个性能优化方案：基于HTTPChunk的首屏数据渐进式预加载方案，该方案减少了1.2s的加载时间。同时对比其与同构渲染方案的异同。单页式应用是近几年来前端技术栈发展与落地的最典型场景，Angular、Vue...
vue-cli3单页构建大型项目方案
11-20
综上所述，使用 Vue CLI 3 构建大型单页面应用时，关键在于合理配置路由模式，利用代码分割优化加载性能，以及通过 `vue.config.js` 自定义项目设置，以适应不同场景的需求。通过这些策略，可以确保项目既易于维护，...
基于gulp打包的vue单页
08-12
在基于Gulp的Vue单页应用（SPA）中，Gulp是一个自动化任务管理工具，它可以帮助开发者实现诸如编译Sass、压缩JavaScript、合并文件、自动刷新浏览器等常见任务，从而提高开发效率。 在"基于gulp打包的vue单页"项目...
基于Vue SEO的四种方案(小结)
10-16
本文将总结四种基于Vue的SEO解决方案。 1. **服务器渲染（SSR）** 服务器渲染是解决Vue SEO问题的一种常见方法。Vue官方提供了支持SSR的库，如Vue-Router和Vuex。SSR使得服务器可以预先渲染HTML，提供给搜索引擎...
移动 H5 首屏秒开优化方案探讨
weixin_33835690的博客
08-17 1560
随着移动设备性能不断增强，web 页面的性能体验逐渐变得可以接受，又因为 web 开发模式的诸多好处(跨平台，动态更新，减体积，无限扩展)，APP 客户端里出现越来越多内嵌 web 页面（为了配上当前流行的说法，以下把所有网页都称为 H5 页面，虽然可能跟 H5 没关系），很多 APP 把一些功能模块改成用 H5 实现。 虽然说 H5 页面性能变好了，但...
vue首屏加载动画
wx479的博客
01-29 386
首屏加载样式
Vue首屏加载等待动画
风口浪尖的猪吖
09-09 2690
vue实现首屏加载等待动画 避免首次加载白屏尴尬的俩种实现方式 1.第一种效果代码 index.html中添加以下代码 <style type="text/css"> .first-loading-wrp { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 90vh; min-he
Vue - 详细实现网站首屏加载等待动画，在 vue 网页项目中实现页面加载时出现动画，解决加载白屏问题（提供详细示例代码，支持自定义 CSS 动画或 GIF 动图等）
王佳斌
01-27 7555
效果图 前言 解决白屏等待方案非常多，个人而言评判好坏的标准即 用最少最简单的代码实现相同的功能。 在 Vue 项目中，网站加载时会显示自定义动画（CSS），当文件加载完毕且页面显示时自动移除动画。 解决方案 原理：动画元素放置在 #app 内，Vue 生命周期开始时，会自动清掉 #app 下所有元素。 您可以打开控制台，将网速调慢后，观察 Elements 元素，当页面呈现的时候 <div id="app"></div> 就会被清除， 打开您的项目，找到根目录 pub
vue首屏优化
sun_qqq的博客
02-06 289
使用vue，首屏优化是避不开的问题。
vue实现首屏加载等待动画 避免首次加载白屏尴尬
weixin_34033624的博客
06-27 1887
0 直接上效果图 1背景，用户体验良好一直是个重要的问题。 2怎么加到自己项目里面？ 复制css html代码到自己的index.html即可 代码链接 源码地址 Vue学习前端群493671066，美女多多。老司机快上车，来不及解释了。 作者相关Vue文章 基于Vue2.0实现后台系统权限控制 前端文档汇总 VUE2.0增删改查附编辑添加model(弹框)组件共用 打赏 衷心的表示感谢 ...
Vue解决首屏加载缓慢的首屏优化秒开(亲测有效)
qq_41429765的博客
07-07 2800
在vue.config.js文件中（1）.使用chainWebpack配置的方式（1）首先在public/index.html文件中将Vue或UI相关的js包引入main.js文件中的修改，将引入的import引入vue这个去掉，然后直接使用Vue注册vant,这个vant也不需要引入，因为在步骤一里面已经引入了vant.js包router.js文件的修改,去掉引入Vue，不引入vue-router,直接注册VueRouteraxios.js文件的修改，不需要引入axios直接使用。
关于Vue单页面应用的首屏加载优化
weixin_45791692的博客
04-01 8972
Vue单页面应用的首屏加载优化
SPA（单页应用）首屏加载速度慢怎么解决？
范德萨的博客
01-05 124
首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容首屏加载可以说是用户体验中最重要的环节资源加载优化页面渲染优化下图是更为全面的首屏优化的方案，可以根据自己项目的情况选择各种方式进行首屏渲染的优化。
Vue单页应用性能优化：从H5到服务端渲染
在客户端，优化策略包括懒加载（LYmpho）、代码分割（Code Splitting）以减少首屏加载时间，预加载（Preload）和预获取（Prefetch）技术用于提高后续资源的加载效率，以及使用Webpack进行模块打包，通过策略如异步...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值