刚好公司最近做了这个项目,就简单说下整体的技术架构,以及我们所做的一些努力。
众所周知,SPA 单页应用的首屏渲染速度问题,以及 SEO 问题一直困扰着很多人,而它带来的媲美 APP 般的丝滑体验令人难以拒绝。
首屏速度问题
SPA 单页应用,一是由于需要加载的 JS 文件比较大,二是因为页面需要进行渲染,所以比较慢。
- CDN
- 将前端所有资源全部放置于 CDN,也就是 html、CSS、JS 文件全部放置在 CDN 下,用户就近访问,提高了访问速度。
- 所有上传以 form 表单上传的形式,不经过云服务器(云服务器 我们只预留了2M 带宽用于 API)
- Nuxt 按需加载
使用 Nuxt(vue) 对 js 文件进行分割,使得首屏只需要加载少量的 JS 即可。
2M 服务器带宽
纯 API
得益于 CDN ,后端只需要走 API 接口,对带宽要求极低,(如果并发量增大,可以使用按流量计费的服务器)GrahQL
合并请求,使得一次请求可以拿到所有数据。SSR
利用 DNS 解析,只提供给搜索引擎访问。也就是说,用户和搜索引擎看到的其实不是同一个页面,搜索引擎看到的是经过服务端渲染的普通 html,这样就解决了SEO的问题。Node.js
后端使用 Node.js ,提供了极快的响应速度。Postgresql
Postgresql 号称最先进的开源数据库,用 postgresql 不仅省内存,而且性能优异,能够负载更高并发。
体验
项目体验地址: http://www.029inno.com