首先我们只讲方向，具体如何做，应该是根据项目的实际情况来做。
资源下载
- 通过cdn做资源分发，要求所有的静态资源都通过cnd进行下载。
- 减少资源体积。这里涉及到三个方面：第一个就是：合理的分包只加载当前页面所需要的资源。使用tree shaking减少不需要的代码。第二个方面就对代码进行压缩，比如uglify，gzip压缩。第三，对于图片，避免使用大体积的图片采用合适的图片尺寸，采用适当的图片格式。
- 减少资源下载的数量，比如对于小图片用base64打包进代码或者使用精灵图，合并css资源。
- 资源的预加载和预请求。当前页面需要加载比较大的模块时，可以采用将这个模块进行分离，然后采用预加载的模式。这样可以避免这个模块阻碍页面主体内容的加载。对于其他页面需要加载的大模块，可以采用预请求，让浏览器在空闲的时候，提前加载好这些资源。
网络请求层面
- 采用http2.0
- 关注接口耗时，这通常就需要后台进行配合
- 缓存，对于没有变动的资源尽可能采用缓存。这里涉及后台和前端。前端层面，每次打包的时候，采用contenthash,这样每次打包的时候，资源变动会变少。
- 主要请求可以优先发送。
- 减少http请求的数量，聚合请求。这个需要根据具体的业务场景去做。比如我要获取用户的信息，然后再获取用户发布的帖子。通常的做法是需要先获取用户的信息发起请求，得到用户信息的时候，再去获取用户的帖子。但是采用聚合接口的话可以一次性获取到所有的信息。但是问题后台会多写一个接口。所以通常使用与必要重要的页面，比如主页面，可以这么做。
- 避免请求不必要的数据，经常后台会传递给前端一些不必要的数据
代码层面
- react提供的优化手段，比如useMemo减少复杂的运算。useCallback,React.memo,shouldComponent，useDefferdVvalue避免组件的重新渲染。
- css放在head,script放在body后面
- 减少代码的重绘和重排，避免手动操作dom，使用动画，脱离文档流这些方式。
- 保证代码的质量。每个开发者的能力和经验不一样。一些低质量的代码也会导致一些性能问题。长时间执行的js代码会导致ui阻塞，一些长列表的处理，防抖和节流，动画，dom，这些问题通常都是由开发者经验不足导致的页面性能变差。这时，代码review，能够很好的帮助我们去发现这些问题，还能够提升开发者的编码水平。
使用工具
- 使用浏览器的perform去分析具体的性能瓶颈
- 使用lighthouse，pageSpeed insights去分析的性能
- 使用埋点和数据上报，去发现追踪的问题，使用web vitals依赖包可以分析主要的性能指标和借助proformace Api去获取具体的性能指标。这些都是可以应用于生产环境。
- 使用webpack提供的插件，比如webpack-bundle-analysis去发现问题。
