【前端知识之Vue】对SPA单页面的理解

饭啊饭°

已于 2022-07-18 09:17:33 修改

阅读量3.6k

点赞数 8

分类专栏：前端知识之Vue 文章标签：前端面试 javascript vue.js

于 2022-06-15 11:00:27 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/125292569

版权

19 篇文章 6 订阅

订阅专栏

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍对SPA单页面的理解。

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

MPA（MultiPage-page application）就是多页应用，每一个页面就是主页面，都是独立的。
在这里插入图片描述
区别：

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

优点

缺点

减小入口文件体积：常用的手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加。在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实现服务端渲染。

全面的首屏优化方式：
在这里插入图片描述