在文章之前，先抛一些灵魂拷问：
前端代码从 tsx/jsx 到部署上线被用户访问，中间大致会经历哪些过程？
上述过程中分别都有哪些考虑、指标和优化点，以满足复杂的业务需求？
可能大部分同学都知道强缓存/协商缓存，那前端各种产物（HTML、JS、CSS、IMAGES 等）应该用什么缓存策略？以及为什么？
若使用协商缓存，但静态资源却不频繁更新，如何避免协商过程的请求浪费？
若使用强缓存，那静态资源如何更新？
配套的，前端静态资源应该如何组织？
配套的，自动化构建 & 部署过程如何与 CDN 结合？
如何避免前端上线，影响未刷新页面的用户？
刚上线的版本发现有阻塞性 bug，如何做到秒级回滚，而非再次部署等 20 分钟甚至更久？
如何实现一个预发环境，除了前端资源外都是线上环境，将变量控制前端环境内？
部署环节如何方便配套做 AB 测试等？
如何实现一套前端代码，发布成多套环境产物？
如何实现按 feature 发布产物供用户使用，并逐步扩大 feature 灰度，将影响减到最小（即线上同时存在多 feature 产物）？
CDN 域名突然挂了，如何实现秒级 CDN 降级修补而非再次全部业务重新部署一次？
本文将会带着这些问题，试着一起探索在2021年，系统化的前端部署解决方案。
PS：本篇关于静态资源组织的问题&思路等，借鉴自知乎大佬张云龙这篇回答 大公司里怎样开发和部署前端代码
静态资源组织
一个简单的页面
先从简单的静态页面开始，众所周知，前端资源由 HTML、JavaScript、CSS 三剑客组成，假设我们有一个简单的页面，用Nginx作为 Web 服务器，资源组织结构大概如下：
作者：字节架构前端
链接：https://juejin.cn/post/7017710911443959839
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论