前端性能相关简单的总结
在进行webpack的时候对文件进行打包加压处理
抽取公共的文件，对于lodash、react、react-dom等常用工具库单独抽取出来
对于小于4k或者小于一定的图片采用base64处理
尽量减少http请求
打包的时候使用tree-sharking去掉没有依赖的文件
图片使用懒加载
组件使用懒加载进行处理
合理使用ssr
-
合理使用强缓存和协商缓存处理缓存文件
- 强缓存cache-control和Expires
Expires是http1.0的规定，返回格林时间，只要请求是没有超过这个时间，就走缓存，如果客户端时间大于缓存时间，缓存则失效
cache-control返回是一个相对时间，如果在这个相对时间内，比如Cache-Control:public,max-age=120,再去请求资源则走缓存资源，如果资源在相对时间内有更新，会导致客户端跟服务端资源不一致。 - 协商缓存Last-Modifed、If-Modified-Since和Etag、if-None-Match两组，当Cache-Control: no-cache，则走协商缓存。
Last-Modifed和If-modified-Since返回文件的修改时间, 返回资源时会把文件修改时间放在Last-Modifed中，当再次请求资源时把返回的时间放在If-Modified-since中，服务端判断文件修改时间是否相同，相同则告诉浏览器走缓存。
Etag和If-None-match返回文件的修改唯一值，类似于文件的hash值,只要文件有修改，就会发生变化，请求资源时服务端会把这个值放在Etag中返回，当客户端再次请求时放在If-None-Match中，服务端根据客户端请求的If-None-Match跟当前文件的值判断，一致则走缓存，不一致则重新返回资源并携带新的唯一值。
hack，可通过在请求资源时带上时间戳从而取消使用缓存,例如
http://127.0.0.1:8088/sockjs-node/info?t=1640916342492 - 强缓存cache-control和Expires
对于长列表可使用virtual-dom进行处理
针对开销较大的loader使用cache-loader处理
减少dom的操作
对于css文件可以单独抽取文件
-
合理使用preload和prefetch加载资源文件
- preload
预加载资源，对于那些页面大概率会用到的js文件可以使用preload - prefetch
预请求资源，用于未来可能会被用到的资源使用，理论是在浏览器空闲的时候会去加载，当后面浏览器真正使用到该资源时，可以直接从缓存中获取。
以上都是一些辅助工具和方法，还要搭配一些产品合理的设计和交互才能够对性能有一定的提升
- preload
