Vue SPA单页面的应用和对比

目录
  • 一、什么是SPA
  • 二、SPA和MPA的区别
  • 三、单页应用的优缺点
  • 四、怎么解决SPA首屏加载速度慢
    • 1、什么是首屏加载
    • 2、加载慢的原因
    • 3、解决方案

一、什么是SPA

  • SPA(single-page-application)就是单页应用。
  • 它通过动态重写当前页面来与用户交互,这种方法避免了页面之间切换打断用户体验在单页应用中,所有必要的代码(HTML、JavaScript和CSS)都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载,也不会将控制转移到其他页面。
  • 熟悉的JS框架如react , vue , angular , ember都属于SPA。

二、SPA和MPA的区别

MPA(MultiPage-page application)就是多页应用,每一个页面就是主页面,都是独立的。

区别:

  单页面应用(SPA) 多页面应用(MPA)
组成 一个主页面和多个页面片段 多个主页面
刷新方式 局部刷新 整页刷新
url模式 哈希模式 历史模式
SEO搜索引擎优化 难实现,可使用SSR方式改善 容易实现
数据传递 容易 通过url,cookie,localStorage等传递
页面切换 速度快、用户体验良好 切换加载资源,速度慢,用户体验差
维护成本 相对容易 相对复杂

三、单页应用的优缺点

优点

  • 具有桌面应用的及时性、网站的可移植性和可访问性;
  • 用户体验好、快,内容的改变不需要重新加载整个页面;
  • 良好的前后端分离,分工更加明确。

缺点

  • 不利于搜索引擎的抓取;
  • 首次渲染速度相对较慢。

四、怎么解决SPA首屏加载速度慢

1、什么是首屏加载

首屏时间:指的是浏览器从响应用户输入地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但要展示当前视窗需要的内容

2、加载慢的原因

  • 网络延时问题;
  • 资源文件体积是否过大;
  • 资源是否重复发送请求加载;
  • 加载脚本的时候,渲染内容堵塞。

3、解决方案

减小入口文件体积:常用的手段是路由懒加载,把不同路由对应的组件分割成不同的代码块,待路由被请求的时候会单独打包路由,使得入口文件变小,加载速度大大增加。在vue-router配置路由的时候,采用动态加载路由的形式。

routes:[
    path: 'Blogs',
    name: 'ShowBlogs',
    component: () => import('./components/ShowBlogs.vue')
]
  • 静态资源本地缓存:后端返回资源问题:采用HTTP缓存,设置Cache-Control,Last-Modified,Etag等响应头;采用Service Worker离线缓存。前端合理利用localStorage
  • UI框架按需加载:在日常使用UI框架,例如element-UI、或者antd,我们经常性直接引用整个UI库,但实际上我用到的组件只有按钮,分页,表格,输入与警告 所以我们要按需引用。
import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)

组件重复打包:假设A.js文件是一个常用的库,现在有多个路由使用了A.js文件,这就造成了重复下载。解决方案:在webpack的config文件中,修改CommonsChunkPlugin的配置。

minChunks: 3 //minChunks为3表示会把使用3次及以上的包抽离出来,放进公共依赖文件,避免了重复加载组件
  • 图片资源的压缩:图片资源虽然不在编码过程中,但它却是对页面性能影响最大的因素。对于所有的图片资源,可以进行适当的压缩,对页面上使用到的icon,可以使用在线字体图标,或者雪碧图,将众多小图标合并到同一张图上,用以减轻http请求压力。
  • 开启GZip压缩
  • 使用SSR:也就是服务端渲染,组件或页面通过服务器生成html字符串,再发送到浏览器。从头搭建一个服务端渲染是很复杂的,vue应用建议使用Nuxt.js实现服务端渲染。

全面的首屏优化方式:

到此这篇关于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单页面应用程序详解

    一.SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容器中. SPA的工作原理: eg:  http://127.0.0.1/index.html#/start ①根据地址栏中url解析完整的页面:index.html 加载index.html ②根据地址栏中url解析#后的路由地址: start 根据路由地址,去在当前应用的配置中 找该路由地址的配置

  • vue单页面如何通过prerender-spa-plugin插件进行SEO优化

    目录 一.前言 二.过程 prerender-spa-plugin插件只能对静态的页面做预渲染实现SEO优化,如果是后台请求的数据需要做SSR处理,例如商品详情页,可使用Vue SSR,详细参考我的另一篇博客:VueSSR的一些理解和详细配置 一.前言 之前虽然一直有看过SEO相关的文章,但是一直没去实践过,然后突然技术总监要求要对咱们的官网做个SEO的优化. 于是才正式动手搞这玩意.地址:火石创造官网 首页用的根目录的index.html /bluebook页面用的bluebook目录下的in

  • 新手vue构建单页面应用实例代码

    本文介绍了新手vue构建单页面应用实例代码,分享给大家,具体如下 步骤: 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 一.目录结构: 二.搭建项目 先安装 vue-cli: sudo npm install -g vue-cli 使用vue-cli构建初始化项目:vue init webpack project(创建webpack项目并下载

  • 利用webstrom调试Vue.js单页面程序的方法教程

    前言 使用 webstrom 调试 Vue.js 单页面程序,理论上来说应该是支持所有用 webpack 构建的应用程序 webstrom 版本:2017.1 代码:使用 vue-cli 构建的基础单页面应用 修改 webpack 配置 由于 webpack 把所有文件全部打包到一起,所以我们需要 webpack 提供给我们一个源地图 修改 devtool 为 source-map 这是我的开发配置文件 webpack.dev.conf.js module.exports = merge(bas

  • Vue.js 单页面多路由区域操作的实例详解

    单页面多路由区域操作 在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容 App.vue 中设置: <router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></r

  • vue构建单页面应用实战

    1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验. 2. 为什么选择 vue? 在选择 vue 之前,使用 reactjs 也做过一个小 Demo,虽然两者都是面向组件的开发思路,但是 reactjs 的全家桶方式,实在太过强势,而自己定义的 JSX 规范,揉和在

  • angular实现spa单页面应用实例

    本篇文章是对单页面的一个简单的基本逻辑操作,这个方法可以搭建基本的单页面的逻辑结构. 简单理解:单页面应用,锚点值切换,一个路由对应一个页面. 路由:此时会创建一个信息保存路由的信息,之后对页面a标签进行操作,会进入路由表中查找与之匹配的路由信息. ----html <div> <a href='#/news'>跳转到news</a> <a href='#/share'>跳转到share</a> <router-view></r

  • Vue Spa切换页面时更改标题的实例代码

    在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet.title="xxx"; 随便创建一个项目,在独立的模块中,created在钩子函数启动之后document.title='标题'; 但是据说在IOS的微信下是无效的,虽然用苹果机测试过有用,但是想到这样会影响我的代码洁癖. <script> export default {

  • vue将单页面改造成多页面应用的方法

    问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用.项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验.我想要的效果是,查看页面只加载查看页面的代码,不包含管理系统的代码,因此着手将单页面应用改造成多页面应用,这里分享下方法. 1.改造文件目录 改造前: 改造后: assets:这里不变,依然放置公用的静态资源文件:components:这里存放应用下所有的vue组件:pages:这里存放我们的多页面

  • 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

  • vue.js单页面应用实例的简单实现

    一:npm的安装 由于新版的node.js已经集成了npm的环境,所以只需去官网下载node.js并安装,安装完成后使用cmd检测是否成功. 测试node的版本号:node -v 测试npm的版本号:npm -v 以上提示代表安装成功 二:vue.js环境搭建 1.首先安装淘宝的npm镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装vue.js环境::cnpm install -g vue-cli 3.测

随机推荐

其他