前端进阶（七）React 16 加载性能优化指南之首屏优化

https://cloud.tencent.com/developer/article/1358160  React 16 加载性能优化指南（上）

https://cloud.tencent.com/developer/article/1359124  React 16 加载性能优化指南（下）

这篇文章是针对这两篇文章的笔记，只为记录，如果侵权，麻烦告知，立刻删除。

------------------------------------------------------------------------------------------------

（一）打开页面 -> 首屏（下载正式html+js+css文件）

1.1. 在 root 节点中写一些东西

比如Loading...或者UI单独设计一个统一的样式。

1.2. 使用 html-webpack-plugin 自动插入 loading

运行时同步加载一个写好的页面（loading html文件和css文件），等到正式页面文件下载完成后替换掉

1.3. 使用 prerender-spa-plugin 渲染首屏

1.4. 除掉外链 css

（二）首屏 -> 首次内容渲染（加载、运行 JS 代码）

几乎所有业务的 JS 代码，都可以大致划分成以下几个大块：

1、基础框架，如 React、Vue 等，这些基础框架的代码是不变的，除非升级框架；

2、Polyfill，对于使用了 ES2015+ 语法的项目来说，为了兼容性，polyfill 是必要的存在；

3、业务基础库，业务的一些通用的基础代码，不属于框架，但大部分业务都会使用到；

4、业务代码，特点是具体业务自身的逻辑代码。

2.1. 缓存基础框架

特点是必须且不变，为基础框架代码设置一个尽量长的缓存时间，使用户的浏览器尽量通过缓存加载这些资源。

附：HTTP 缓存资源小结

HTTP 为我们提供了很好几种缓存的解决方案，不妨总结一下：

1. expires

expires: Thu, 16 May 2019 03:05:59 GMT

在 http 头中设置一个过期时间，在这个过期时间之前，浏览器的请求都不会发出，而是自动从缓存中读取文件，除非缓存被清空，或者强制刷新。缺陷在于，服务器时间和用户端时间可能存在不一致，所以 HTTP/1.1 加入了 cache-control 头来改进这个问题。

2. cache-control

cache-control: max-age=31536000