转载自字节架构前端
先上灵魂拷问
在文章之前,先抛一些灵魂拷问:
- 前端代码从 tsx/jsx 到部署上线被用户访问,中间大致会经历哪些过程?
- 上述过程中分别都有哪些考虑、指标和优化点,以满足复杂的业务需求?
- 可能大部分同学都知道强缓存/协商缓存,那前端各种产物(HTML、JS、CSS、IMAGES 等)应该用什么缓存策略?以及为什么?
- 若使用协商缓存,但静态资源却不频繁更新,如何避免协商过程的请求浪费?
- 若使用强缓存,那静态资源如何更新?
- 配套的,前端静态资源应该如何组织?
- 配套的,自动化构建 & 部署过程如何与 CDN 结合?
- 如何避免前端上线,影响未刷新页面的用户?
- 刚上线的版本发现有阻塞性 bug,如何做到秒级回滚,而非再次部署等 20 分钟甚至更久?
- 如何实现一个预发环境,除了前端资源外都是线上环境,将变量控制前端环境内?
- 部署环节如何方便配套做 AB 测试等?
- 如何实现一套前端代码,发布成多套环境产物?
- 如何实现按 feature 发布产物供用户使用,并逐步扩大 feature 灰度,将影响减到最小(即线上同时存在多 feature 产物)?
- CDN 域名突然挂了,如何实现秒级 CDN 降级修补而非再次全部业务重新部署一次?
本文将会带着这些问题,试着一起探索在2021年,系统化的前端部署解决方案。
PS:本篇关于静态资源组织的问题&思路等,借鉴自知乎大佬张云龙这篇回答 大公司里怎样开发和部署前端代码