資訊專欄INFORMATION COLUMN
摘要：那大公司的靜態(tài)資源是怎么發(fā)布的呢發(fā)布要求靜態(tài)資源必須走如非自建，推薦又拍云，阿里云，七牛云。發(fā)布和問題發(fā)布流程如果我們把靜態(tài)資源的實際訪問域名設置為。功能開發(fā)結束后，開發(fā)人員把靜態(tài)資源提交到測試環(huán)境倉庫。業(yè)務業(yè)務都是使用同樣的發(fā)布方案。
靜態(tài)資源（Static Resources）: js、css、img 等非服務器動態(tài)運行生成的文件。
在一般的網站中，靜態(tài)資源使用頻率高，流量占用大。對于有追求（訪問量稍大）的網站，都會把靜態(tài)資源放置到 CDN 服務器，不占用業(yè)務服務器的網絡帶寬，而達到更好的用戶體驗。那大公司的靜態(tài)資源是怎么發(fā)布的呢？
發(fā)布要求 1. 靜態(tài)資源必須走 CDN如非自建 CDN，推薦 又拍云，阿里云，七牛云。
2. 平滑升級--非覆蓋式發(fā)布在不修改線上靜態(tài)資源的情況下，發(fā)布新的靜態(tài)資源。即 CDN 上的靜態(tài)資源必須共存多個靜態(tài)資源版本。
負責百度 FIS 的核心功能開發(fā)者張云龍已經給出了 部署的方案，非覆蓋式發(fā)布。他的文中提到：
先部署頁面，再部署資源：在二者部署的時間間隔內，如果有用戶訪問頁面，就會在新的頁面結構中加載舊的資源，并且把這個舊版本的資源當做新版本緩存起來，其結果就是：用戶訪問到了一個樣式錯亂的頁面，除非手動刷新，否則在資源緩存過期之前，頁面會一直執(zhí)行錯誤。
先部署資源，再部署頁面：在部署時間間隔之內，有舊版本資源本地緩存的用戶訪問網站，由于請求的頁面是舊版本的，資源引用沒有改變，瀏覽器將直接使用本地緩存，這種情況下頁面展現正常；但沒有本地緩存或者緩存過期的用戶訪問網站，就會出現舊版本頁面加載新版本資源的情況，導致頁面執(zhí)行錯誤，但當頁面完成部署，這部分用戶再次訪問頁面又會恢復正常了。
3. 精確的緩存控制——文件版本號更新靜態(tài)資源，只更新修改的部分。不能修改未更新的資源的引用。
在 CDN 的配置中，會把緩存的時間設置很長。文件的更新就需要一種靈活的機制，也不能每次發(fā)布版本就把所有文件更新一遍，全量更新靜態(tài)資源對于用戶和服務提供者來說都是非常不友好的，極度浪費 CDN 資源和用戶的流量。
比如： a.html 頁面引用了 100 個靜態(tài)資源文件，但是本次發(fā)版本只修改了一個a.js文件。那么就只能修改 a.js 文件的引用，可能修改為 a.hash.js。
解決辦法：根據文件的內容算出一個值，如果文件內容不改變，那么這個值就不會改變。
張云龍的文章中給出了『精確的緩存控制』的原理————我們會很自然的聯(lián)想到利用 數據摘要要算法 對文件求摘要信息，摘要信息與文件內容一一對應，就有了一種可以精確到單個文件粒度的緩存控制依據了。
Grunt,gulp 也有對應的插件用來解決這個問題。如果你使用 webpack，那么可以配置下 chunkhash 或者 hash。更厲害的，文章末尾還有相關的解決方案。
發(fā)布和問題 1. 發(fā)布流程如果我們把靜態(tài)資源的實際訪問域名設置為 res.company.com。
功能開發(fā)結束后，開發(fā)人員把靜態(tài)資源提交到測試環(huán)境 Git 倉庫。
測試人員在測試環(huán)境通過綁定 host 的方式測試，測試通過后，進入發(fā)布階段，需要靜態(tài)資源代碼提交到產品環(huán)境 Git 倉庫。（使用測試和產品兩個倉庫，是為了測試和產品環(huán)境完全隔離）
源站（origin.res.company.com）從產品環(huán)境 Git 拉取靜態(tài)資源的代碼，并且為靜態(tài)資源提供訪問服務（nginx 等），該域名不提供文件緩存服務，僅僅作為 CDN 的回源地址。所以代碼中一定不要寫源站的信息。
在 CDN 服務商提供的空間中，將回源地址配置為源站（origin.res.company.com）。
CDN 服務器會提供一個默認的訪問域名，比如 cdn-1.res.cdn_company.com, 然后把實際需求訪問的靜態(tài)資源域名 res.company.com CNAME 到 cdn-1.res.cdn_company.com。
代碼發(fā)布完畢。用戶訪問的時候，會訪問到最近的 CDN 階段。CDN 結點去文件中心取文件，如果不存在文件則回源到源站，獲取文件。(有些 CDN 產品提供文件存儲功能，異地備份)
通過這樣的流程，就能讓用戶訪通過 CDN 訪問到我們的實際資源。
2. 怎么做到多個項目共存結論：我們會按照目錄來劃分業(yè)務的靜態(tài)資源。
res.company.com 域名下面會共存多個業(yè)務。A 業(yè)務、B 業(yè)務都是使用同樣的發(fā)布方案。
比如某靜態(tài)資源的訪問路徑為：http://res.company.com/:業(yè)務名/js/test.de5b0b0c.js。
多個團隊可以使用同一個靜態(tài)資源倉庫，res.git，然后按照目錄來區(qū)分業(yè)務。web 服務器直接指向到 res/即可。靜態(tài)資源更新只需要 pull 代碼即可，而不需求做其他改動。
3. 是否同步源站文件到 CDN結論：同步源站文件到 CDN 能確保實現非覆蓋式發(fā)布。
又拍云等 CDN 服務商都提供了這些貼心的服務，就算你提交了新的同名文件，那也是不會生效的。
終端用戶就近訪問 CDN 加速節(jié)點上的資源
若 CDN 加速節(jié)點上不存在資源，則回源獲取資源
回源獲取的資源持久化存儲到 CDN
返回資源內容給終端用戶
當終端用戶再次訪問相同的資源時，CDN 的加速節(jié)點將直接返回資源內容，不需要重新回源獲取
另外我還做了測試，在未做源站遷移的情況下，刪掉源站文件，會出現大面積的 404 響應。
超厲害的 CDN 服務商——又拍云
微信出品的前端工程化工具——tmt-workflow
百度團隊出品——FIS
京東的非官方——JDF
能打造最牛逼的工程化工具——webpack
參考文檔大公司里怎樣開發(fā)和部署前端代碼？
前端工程精粹（一）：靜態(tài)資源版本更新與緩存
又拍云【功能介紹】源站資源遷移
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/10945.html
摘要：本文內容節(jié)選自由主辦的第七屆，北京一流科技有限公司首席科學家袁進輝老師木分享的讓簡單且強大深度學習引擎背后的技術實踐實錄。年創(chuàng)立北京一流科技有限公司，致力于打造分布式深度學習平臺的事實工業(yè)標準。 本文內容節(jié)選自由msup主辦的第七屆TOP100summit，北京一流科技有限公司首席科學家袁進輝（老師木）分享的《讓AI簡單且強大：深度學習引擎OneFlow背后的技術實踐》實錄。 北京一流...
摘要：所以，我們主要來講架構是如何進行演化的。此前，我提到同城最初的技術選型是，應該是在年的時候，整個網站的性能變得非常之低。對技術的要求越來越高，任何一個站點都不能掛，對站點的可用性要求也是越來越高。 【編者按】對很多創(chuàng)業(yè)公司而言，隨著業(yè)務的增長，網站的流量也會經歷不同的階段。從十萬流量到一百萬流量，再從一百萬流量跨越到一千萬甚至上億的流量，網站的架構需要經歷哪些變化？我們一起聽聽 58 ...
摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優(yōu)化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...
摘要：項目前端工程化的探索不通過層實現非網頁開發(fā)的前后端分離。做過這樣項目的各位攻城獅應該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態(tài)資源，我們可以直接在目錄下寫，當然也可以開一個前端工程來寫，最后把模板和靜態(tài)資源到工程的相應目錄下。 Django項目前端工程化的探索 不通過node層實現非SPA網頁開發(fā)的前后端分離。 技術棧：webpack + jade + es6 + scss +...
摘要：項目前端工程化的探索不通過層實現非網頁開發(fā)的前后端分離。做過這樣項目的各位攻城獅應該都知道有多痛苦吧。仔細想來，其實只是想要模板和靜態(tài)資源，我們可以直接在目錄下寫，當然也可以開一個前端工程來寫，最后把模板和靜態(tài)資源到工程的相應目錄下。 Django項目前端工程化的探索 不通過node層實現非SPA網頁開發(fā)的前后端分離。 技術棧：webpack + jade + es6 + scss +...
閱讀 1342·2021-09-24 10:26
閱讀 3655·2021-09-06 15:02
閱讀 604·2019-08-30 14:18
閱讀 576·2019-08-30 12:44
閱讀 3119·2019-08-30 10:48
閱讀 1936·2019-08-29 13:09
閱讀 1993·2019-08-29 11:30
閱讀 2279·2019-08-26 13:36
