對於前端工程領域,不要以為前端資源的釋出很簡單,考慮到歷史版本的相容,我們釋出靜態資原始檔時不能直接簡單的覆蓋。
對於檔案釋出方式,主要可分為兩大類:
1、覆蓋式釋出
我們部署動態頁面或靜態資源時若採用覆蓋式釋出,會導致歷史版本無法相容、頁面混亂的現象,需要儘可能避免。
2、非覆蓋式釋出
本次上線涉及的檔案不會影響舊版本檔案,可確保老版本的相容,但是經過多輪迭代後,廢棄版本檔案較多。
但對於大型專案而言,一般都是採用非覆蓋式釋出。
現在中大型網站都會使用CDN來快取前端資原始檔,一旦靜態資源使用了強制快取且快取時間很長,那靜態檔案的更新就依懶檔名的變化來實現,此時可使用基於檔案內容的MD5戳來命名檔案以實現資源更新。
但是這樣也會存在問題,比如說:一個頁面引用了多個CSS檔案,而每個CSS檔案裡又引用了多個圖片資源,若某個圖片資源發生了變化,我們就必須同步更新:
圖片的檔名
CSS的檔名
還要更新頁面中引用的CSS檔名
考慮到加蓋MD5戳的方式實現非覆蓋更新時,鏈路其它資源需要同步更新帶來的維護成本。我們建議基於檔案版本來實現非覆蓋釋出,每個版本迭代時,前端檔案集中在一起放在某個版本資料夾中直接引用即可。
對於前端工程領域,不要以為前端資源的釋出很簡單,考慮到歷史版本的相容,我們釋出靜態資原始檔時不能直接簡單的覆蓋。
檔案釋出方式對於檔案釋出方式,主要可分為兩大類:
1、覆蓋式釋出
我們部署動態頁面或靜態資源時若採用覆蓋式釋出,會導致歷史版本無法相容、頁面混亂的現象,需要儘可能避免。
2、非覆蓋式釋出
本次上線涉及的檔案不會影響舊版本檔案,可確保老版本的相容,但是經過多輪迭代後,廢棄版本檔案較多。
但對於大型專案而言,一般都是採用非覆蓋式釋出。
基於MD5摘要實現非覆蓋釋出現在中大型網站都會使用CDN來快取前端資原始檔,一旦靜態資源使用了強制快取且快取時間很長,那靜態檔案的更新就依懶檔名的變化來實現,此時可使用基於檔案內容的MD5戳來命名檔案以實現資源更新。
但是這樣也會存在問題,比如說:一個頁面引用了多個CSS檔案,而每個CSS檔案裡又引用了多個圖片資源,若某個圖片資源發生了變化,我們就必須同步更新:
圖片的檔名
CSS的檔名
還要更新頁面中引用的CSS檔名
這樣一來,維護起來很麻煩,當一個鏈(如:html > css > jpg)的末端資源列新時,那這麼鏈路上的所有資源都要同步加蓋MD5戳。建議基於版本實現非覆蓋釋出考慮到加蓋MD5戳的方式實現非覆蓋更新時,鏈路其它資源需要同步更新帶來的維護成本。我們建議基於檔案版本來實現非覆蓋釋出,每個版本迭代時,前端檔案集中在一起放在某個版本資料夾中直接引用即可。