vue|单页面应用与多页面应用对比🆚🆚

135 阅读1分钟

1、单页面应用

在web页面初始化的时候就加载所有的css、js、html文件,后面不会因为用户的操作重新加载这个页面,只加载一次;然后利用js动态的变化html的内容。

image (13).png

2、优点

前后端分离

用户体验好,页面表现流畅

减轻了服务器的压力,服务器只需要返回json数据,而不是一个html 共用一套后端代码,

前端可以实现pc端,手机端

3、缺点

(1)首屏加载速度慢

(2)不利于seo

(3)无法使用浏览器的导航,没有办法前进和后退

4、首屏加载速度慢的解决方案

利用路由的懒加载,减少入口文件的体积,待路由被请求时,会单独打包,使得入口文件体积变小

routes:[ 
    path: 'Blogs',
    name: 'ShowBlogs',
    component: () => import('./components/ShowBlogs.vue')
]

以函数的形式加载路由,这样就可以把各自的路由文件分别打包,只有在解析给定的路由时,才会加载路由组件

利用http缓存,设置cache-Control、Etag等,缓存静态资源

UI框架的按需加载

3、单页面和多页面的对比

image (14).png

参考👀

blog.csdn.net/luckyzhoufa…