前端 - 關於引用樣式檔案或資源檔案的版本號碼問題

Question

有時在引用樣式檔案或資源檔案時會加上版本號碼
例如：
style.css?v=20140520
background: xxx.jpg?v=201140520
我是菜鳥，有這麼多困惑：

• 這樣的好處和必要性是什麼？我只知道一點，避免用戶端的快取而使樣式不刷新。請問還有別的考慮嗎？
• 在什麼情況下是可以不加的，在什麼情況下是必須加的？因為我在讀別的網站原始碼的時候發現有些是加的，有些是不加的。
• 伺服器根據版本號傳回對應版本的檔案的機制是怎麼樣的？我之前對svn，git等版本管理工具的認知僅僅停留在團隊程式碼協作工具上。是不是在這個機制裡是svn起的作用？具體的流程是怎麼樣的？
• 如何決定版本號？我看很多程式碼加版本號碼的時候是加日期？還有別的方式嗎？如何知道自己該加的版本號碼是什麼？

Answer 1

我們希望工程師源碼是這麼寫的：

<script type="text/javascript" src="a.js"></script>

但是線上程式碼是這樣的：

<script type="text/javascript" src="a_82244e91.js"></script>

其中”_82244e91”這串字元是根據a.js的檔案內容進行hash運算得到的，只有檔案內容發生變化了才會有更改。由於版本序列是與檔案名稱寫在一起的，而不是同名檔案覆蓋，因此不會出現上述所說的那些問題。同時，這麼做還有其他的好處：

線上的a.js不是同名檔案覆蓋，而是檔案名稱+hash的冗餘，所以可以先上線靜態資源，再上線html頁面，不存在間隙問題；
遇到問題回溯版本的時候，無需回滾a.js，只須回滾頁面即可；
由於靜態資源版本號是檔案內容的hash，因此所有靜態資源可以開啟永久強緩存，只有更新了內容的檔案才會
快取失效，快取利用率大增；
修改靜態資源後會在線上產生新的文件，一個文件對應一個版本，因此不會受到建構CDN快取形式的攻擊

靜態資源版本更新與快取

Answer 2

1. 你說的對，這樣的好處和必要性就是避免用戶端的快取而使樣式不刷新。其它都不重要。
2. 如果有版本快速迭代的需求，建議加，以便用戶及時更新。如果是長時間無更新的頁面不必加。
3. 通常由發布、打包工具來負責輸出特定的版本號。
4. 可以選用版本管理工具的總體版本號，可以選用修改或打包日期號，可以選用任何自訂的版本號（例如在頭文件里手動指定的版本號），總之按需自選。一般用日期號就可以了，比較簡單。

Answer 3

1. 對於經常需要修改的靜態檔案。 每次修改後自動產生新的版本號。 瀏覽器就會對新文件進行快取。
   對於常用不變的這個就可以不加。 例如你用了不准要製定的第三方函式庫 版本升級的頻率不會很高。 這樣的就可一不加。