本文不局限于React代码层面可做的优化，从 应用加载性能、首屏性能、react层面、打包构建四个方面分析。
应用加载性能
常规的，css放头部，js放body底部，CSS雪碧图等
CDN对于静态资源加载优化
首先明白CDN主要做了两件事，可以优化的主要在第二点：
1、让用户访问距离最近的节点。
2、二是从缓存或者源站获取资源返回给用户。
第一次访问
CDN上没有缓存，需要进行预热。
非第一次访问
1、资源访问量低，CDN接收的请求过少，无法命中到缓存。
2、资源配置时间不合理，频繁回流到源站请求数据。
3、http 缓存设置不合理，http缓存 cache-control配置publick，可以被代理服务器缓存。
4、开启gzip。
5、url带有参数，CDN会认为是新请求，开启过滤参数。
6、大文件做切片。
合理使用缓存
主要说下http缓存
serviceSorker等本人也没实际使用过，这里说下http缓存，掘金上介绍这个的文章已经很多了，这里推荐一篇
单页面来说目前的最佳实践应该是 对HTML文件使用协商缓存，每次去检查服务器文件情况，或者直接不缓存HTML；JS/CSS/图片等静态资源使用强缓存，cache-control的max-age配置一个比较长的过期时间，同时借助webpack等打包工具给文件名加上hash值。
按需加载
webpack4中直接使用内置的splitChunkPlugin，在optimization.splitChunks中进行配置。推荐这篇文章
使用prefetch、preload、preconnect。再推荐这篇文章
首屏性能
几个关键指标：FP、FCP、FMP
FP(First Paint)
<div id="app"></div>
FCP(First Contentful Paint),html有结构
<div id="app">
<div></div>
<div></div>
</div>
FMP(First Meaningful Paint)，html渲染真实数据（ajax有数据返回）
<div id="app">
<div>div1</div>
<div>div2</div>
</div>
预渲染、SSR
- 预渲染是在服务端使用无头浏览器渲染完发送给客户端，对于动态数据不友好。
- SSR：React中提供react-dom/server下的 renderToString方法在服务器上JSX转化成 HTML 字符串返回到浏览器。状态同步一般结合redux使用，将服务端的数据放到window上，客户端初始化reduxstore时给createStore方法传入window上的初始数据。
React代码层
组件懒加载
老版本可以使用react-loadable库，16之后可以使用Suspense搭配lazy使用
class组件使用PureComponent或者自己实现shouldComponentUpdate，function组件使用memo
使用hooks，useMomo/useCallback等。
使用不可变数据，官方的immutable，或者使用我最喜欢的immer。
使用骨架屏
打包构建
这里也提几个常用的webpack构建优化
缓存
开启babel-loader的cache:true
使用cache-loader
利用多核
happypack
thread-loader
terser-webpack-plugin(直接支持配置缓存和多进程)
使用DllPlugin
使用tree-shaking
externals配合CDN使用
不需要转化解析的模块配置noParse
//webpack.config.js
module.exports = {
//...
module: {
noParse: /jquery|lodash/
}
}
未完待续...
