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

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

首屏速度问题

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

  • CDN
  1. 将前端所有资源全部放置于 CDN，也就是 html、CSS、JS 文件全部放置在 CDN 下，用户就近访问，提高了访问速度。
  2. 所有上传以 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