前端性能优化

前端性能相关简单的总结

1. 在进行webpack的时候对文件进行打包加压处理

2. 抽取公共的文件，对于lodash、react、react-dom等常用工具库单独抽取出来

3. 对于小于4k或者小于一定的图片采用base64处理

4. 尽量减少http请求

5. 打包的时候使用tree-sharking去掉没有依赖的文件

6. 图片使用懒加载

7. 组件使用懒加载进行处理

8. 合理使用ssr

9. 合理使用强缓存和协商缓存处理缓存文件

   • 强缓存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
   

10. 对于长列表可使用virtual-dom进行处理

11. 针对开销较大的loader使用cache-loader处理

12. 减少dom的操作

13. 对于css文件可以单独抽取文件

14. 合理使用preload和prefetch加载资源文件

    • preload
      预加载资源，对于那些页面大概率会用到的js文件可以使用preload
    • prefetch
      预请求资源，用于未来可能会被用到的资源使用，理论是在浏览器空闲的时候会去加载，当后面浏览器真正使用到该资源时，可以直接从缓存中获取。
      以上都是一些辅助工具和方法，还要搭配一些产品合理的设计和交互才能够对性能有一定的提升