Vue SPA 首屏优化方案


Posted in Vue.js onFebruary 26, 2021

前言

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

Vue SPA 首屏优化方案

存在两个比较大的问题:

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

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

优化

SSR

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

Vue SPA 首屏优化方案

可以看到返回的内容就已经包含了首屏内容的 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 图标,如下腾讯官网的一个图片:

Vue SPA 首屏优化方案

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

使用CDN

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

不使用 CDN:

Vue SPA 首屏优化方案

使用 CDN:

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

Vue SPA 首屏优化方案

入口 chunk 优化

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

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

Vue SPA 首屏优化方案

分离一个 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 首屏优化的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vuex的使用步骤
Jan 06 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 #Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 #Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 #Vue.js
Vue基本指令实例图文讲解
Feb 25 #Vue.js
vue常用高阶函数及综合实例
Feb 25 #Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 #Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 #Vue.js
You might like
php实现头像上传预览功能
2017/04/27 PHP
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
详解Node.js串行化流程控制
2017/05/04 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
Django框架中方法的访问和查找
2015/07/15 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python删除某个字符
2018/03/19 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
python3 拼接字符串的7种方法
2018/09/12 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
如何在django中运行scrapy框架
2020/04/22 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
机械电子工程专业自荐书
2014/06/10 职场文书
庆六一开幕词
2015/01/29 职场文书
天坛导游词
2015/02/02 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫