SPA缺点

SPA缺点

1.首屏加载慢的原因

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

解决办法

常见的几种SPA首屏优化方式：减小入口文件积、UI框架按需加载、图片资源的压缩、组件重复打包、开启GZip压缩

减小入口文件积

常用的手段是路由懒加载，不需要打开首页就把全部组件都加载了，按需引用。

静态资源本地缓存

后端返回资源问题：

• 采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头
• 采用Service Worker离线缓存

前端合理利用localStorage

UI框架按需加载

在日常使用UI框架，例如element-UI、或者antd，我们经常性直接饮用整个UI库

import ElementUI from 'element-ui'
Vue.use(ElementUI)

但实际上我用到的组件只有按钮，分页，表格，输入与警告 所以我们要按需引用

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)

组件重复打包

图片资源的压缩

开启GZip压缩

使用SSR(服务端渲染)

2.SEO差

搜索引擎只认识HTML内容不认识JS内容。单页应用的渲染都是靠JavaScript渲染出来的。搜索引擎不好识别排名。

参考文献：https://blog.youkuaiyun.com/weixin_44475093/article/details/110675962