刚好公司最近做了这个项目,就简单说下整体的技术架构,以及我们所做的一些努力。

众所周知,SPA 单页应用的首屏渲染速度问题,以及 SEO 问题一直困扰着很多人,而它带来的媲美 APP 般的丝滑体验令人难以拒绝。

首屏速度问题

SPA 单页应用,一是由于需要加载的 JS 文件比较大,二是因为页面需要进行渲染,所以比较慢。

  • CDN
  1. 将前端所有资源全部放置于 CDN,也就是 html、CSS、JS 文件全部放置在 CDN 下,用户就近访问,提高了访问速度。
  2. 所有上传以 form 表单的形式,不经过云服务器(云服务器 我们只预留了1M 带宽用于 API)
  • Nuxt 按需加载
    使用 Nuxt(vue) 对 js 文件进行分割,使得首屏只需要加载少量的 JS 即可。

1M服务器带宽

  • 纯 API
    得益于 CDN ,后端只需要走 API 接口,对带宽要求极低,(如果并发量增大,可以使用按流量计费的服务器)

  • GrahQL
    合并请求,使得一次请求可以拿到所有数据。

  • SSR
    利用 DNS 解析,只提供给搜索引擎访问。也就是说,用户和搜索引擎看到的其实不是同一个页面,搜索引擎看到的是经过服务端渲染的普通 html,这样就解决了SEO的问题。

  • Node.js
    后端使用 Node.js ,提供了极快的响应速度。

  • Postgresql
    Postgresql 号称最先进的开源数据库,用 postgresql 不仅省内存,而且性能优异,能够负载更高并发。

体验

项目体验地址: http://www.029inno.com