Vue SPA 首屏优化方案

前言

常规 vue 项目打包后访问，返回一个只包含 div 的 html，其他内容块都是通过 js 动态生成的。

存在两个比较大的问题：

  • 不利于 seo
  • 首屏加载页慢，用户体验不好

本文是自己根据项目经验总结的方案，如有不足，欢迎指出~

优化

SSR

SSR(Server-Side Rendering) 即服务端渲染，把 vue 组件在服务器端渲染为组装好的 HTML 字符串，然后将它们直接发送到浏览器，最后需要将这些静态标记混合在客户端上完全可交互的应用程序。
使用 ssr 重新部署构建项目后：

可以看到返回的内容就已经包含了首屏内容的 html 代码块，perfect!~.~

极速传送门： 基于vue-cli4.0+Typescript+SSR的小Demo

按需引入

使用 es6 module 进行按需引入

1. 路由文件中按需引入组件

# router.index.ts
export function createRouter() {
 return new Router({
 mode: 'history',
 routes: [
  {
  path: '/',
  name: 'Home',
  component: () => import(/* webpackChunkName: "Home" */ './views/Home.vue'),
  },
  {
  path: '/about',
  name: 'About',
  component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
  },
 ],
 });
}

2. 静态库按需引入模块，而不是全部

如 element-ui 库中，我只想用 button 组件 ：

import {
 button
} from 'element-ui';

请求优化

1. css、js 放置顺序

css 文件放 header 中，js 文件放 body前，不过 vue 已经帮我们处理好了~

2. 使用字体图标，icon 资源使用雪碧图

我们知道 http 建立一次连接需要 3 次握手，太多的请求会影响加载速度

对不必要的静态资源我们应该尽量减少，比如页面中的 icon 图标，如下腾讯官网的一个图片：

直接引入一张完成的图片，根据 background-position 来设置图片的位置

使用CDN

静态资源都上传到 CDN，提高访问速度

不使用 CDN：

使用 CDN：

可以看到使用 CDN后，会对静态文件进行 GZIP 压缩， 下载度度极大的提高

入口 chunk 优化

拆分入口 chunk 文件，分离出一些静态的库，既可以加速打包，也可以优化加载。

如下，分离了一些静态库：vuejs、axios、vuex等，可以看到浏览器将开启多个下载线程进行下载。若没有分离这些静态库，入口 chunk 将十分巨大，加载速度可想而知~.~

分离一个 element-ui 库，dev 环境我们不用管，prod 环境下我们才分离，只需要在 vue 打包配置中移除该库即可：

# vue.config.js
configureWebpack: {
 externals:
 process.env.NODE_ENV === 'production'
  ? {
  'element-ui': 'element-ui',
  }
  : undefined,
},

# index.html 手动引入静态资源
<script src="/js/element-ui/element-ui.2.11.1.js"></script>

以上就是Vue SPA 首屏优化方案的详细内容，更多关于Vue SPA 首屏优化的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue-cli单页面预渲染seo-prerender-spa-plugin操作

    1 vue-cli-plugin-prerender-spa 使用方法: vue add prerender-spa 在安装的过程中会需要安装一个chrome,网速不好可能导致不能下载,导致安装失败,可以取消chrome的安装,然后手动下载放在指定的目录下: 安装过程中选择需要预渲染的route 安装成功: 自动在main.js中加入: 2 使用prerender-spa-plugin插件 cnpm i prerender-spa-plugin --save-dev vue-cli2.0 在bu

  • vue spa应用中的路由缓存问题与解决方案

    vue spa应用中的路由缓存问题与解决方案

    单页面应用中的路由缓存问题 通常我们在进行页面前后退时,浏览器通常会帮我们记录下之前滚动的位置,这使得我们不会在每次后退的时候都丢失之前的浏览器记录定位.但是在现在愈发流行的SPA(single page application 单页面应用)中,当我们从父级页面打开子级页面,或者从列表页面进入详情页面,此时如果回退页面,会发现之前我们浏览的滚动记录没有了,页面被置顶到了最顶部,仿佛是第一次进入这个页面一样.这是因为在spa页面中的url与路由容器页面所对应,当页面路径与其发生不匹配时,该页面组件

  • VUE解决微信签名及SPA微信invalid signature问题(完美处理)

    前端小菜鸟,因为项目要对接微信的jssdk,对接就需要签名认证,但是无奈安卓和IOS各有各的坑,本篇文章只讨论签名,和一个分享的坑,希望大家有所收获,能够解决问题,如果解决不到,请麻烦在评论区留言,本文综合了所有的回答,才调试出来坑 需求: 使用微信的功能 原因: 1. 项目基于vue,在微信上的web应用 2. 要使用上传功能(不同系统的兼容真的很多BUG,最后只能使用微信方案),支付功能,定位.... 3. 签名一直存在bug和问题,那么后面的功能都会唤不起(偶尔也可以) 签名 1. 流程详

  • Vue实现数据表格合并列rowspan效果

    Vue实现数据表格合并列rowspan效果

    背景 现实中会遇到很多需求,合并列,例如要显示一个名学生的各门课程成绩. html实现 使用html实现是比较简单的,利用table标签的rowspan属性即可,代码如下: <table> <thead> <tr> <th>姓名</th> <th>课程数</th> <th>课程名称</th> <th>成绩</th> </tr> </thead> <

  • Vue SPA单页应用首屏优化实践

    1.代码压缩(gzip) 如果你用的是nginx服务器,请修改配置文件(其他web server 类似):sudo nano /etc/nginx/nginx.conf 在Gzip Settings里加入: gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 5; gzip_types text/plain application/x-javascript text/css application/xml text/j

  • vuex中store存储store.commit和store.dispatch的用法

    代码示例: this.$store.commit('loginStatus', 1); this.$store.dispatch('isLogin', true); 规范的使用方式: // 以载荷形式 store.commit('increment',{ amount: 10 //这是额外的参数 }) // 或者使用对象风格的提交方式 store.commit({ type: 'increment', amount: 10 //这是额外的参数 }) 主要区别: dispatch:含有异步操作,数

  • Vue SPA 初次进入加载动画实现代码

    在app挂载的div同级处写一个加载动画,例如: <body class="font-hei"> <div class="wrap" id="loader"> <div> <div class="mult2rect mult2rect1"></div> <div class="mult2rect mult2rect2"></div

  • 详解vuex中action何时完成以及如何正确调用dispatch的思考

    在项目中遇到关于action与dispatch使用的一些细节问题,经过搜索得到了一些答案. 特意在此提出,如有错误还请指出,十分感谢- 问题1:如果action是异步的,那么怎么知道它什么时候完成?在vuex的官网给出了答案: 注:如果需要通过组合多个action来完成某些逻辑,用async/await会更简单一点 问题2: 如果action是同步的,就不需要等待它完成了吗? 其实这个问题相当于在w:dispatch('some action')是一个同步函数还是异步函数. 如果dispatch

  • Vue实现boradcast和dispatch的示例

    这篇内容主要是学习掘金小册vue组件精讲的一个案例,自己做下笔记,以免日后忘记. 1.mixins(混入) 我所理解的mixins就是共享,就好比面向对象里面的原型prototype那种感觉的东西,把相同的逻辑抽离出来便于维护. 先来看下src目录结构 src                     ├─ components        │  ├─ A              │  │  └─ index.vue   │  ├─ B              │  │  └─ index.

  • 详解vue之自行实现派发与广播(dispatch与broadcast)

    要解决的问题 主要针对组件之间的跨级通信 为什么要自己实现dispatch与broadcast? 因为在做独立组件开发或库时,最好是不依赖第三方库 为什么不使用provide与inject? 因为它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系. 然后有两种场景它不能很好的解决: 父组件向子组件(支持跨级)传递数据: 子组件向父组件(支持跨级)传递数据. 代码如下: emitter.js function broadcast(componentName,

  • 解决Vue+Electron下Vuex的Dispatch没有效果问题

    解决Vue+Electron下Vuex的Dispatch没有效果问题

    这个问题是解决基于 vue 和 electron 的开发中使用 vuex 的 dispatch 无效的问题,即解决了 Please, don't use direct commit's, use dispatch instead of this. 问题. 先允许我梳理一下目录结构,以便阅读的时候不会一头雾水,你到底说的这个文件是哪个-- 其中 /src/main 是存放主配置文件的,/src/render 下面有 store.router.components 等. components 下面就

随机推荐