vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue SPA单页面

Vue SPA单页面的应用和对比

作者:饭啊饭°

单页面是指整个应用程序只有一个唯一完整的 HTML 页面,而其它所谓的页面,其实都是组件片段而已,切换页面也只是切换一个 HTML 中显示不同的组件片段。在今后所有的开发项目都是单页面应用

一、什么是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')
]
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次及以上的包抽离出来,放进公共依赖文件,避免了重复加载组件

全面的首屏优化方式:

到此这篇关于Vue SPA单页面的应用和对比的文章就介绍到这了,更多相关Vue SPA单页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文