自動幫 JavaScript / CSS 檔加上版本編號

上個星期才解決這個自動加版本編號的問題, 結果今天就看到一篇寫這類的文章, 真心痛, 這篇文章出來的太晚了.. :~~

推薦好文: Automatically Version Your CSS and JavaScript Files

通常要讓網站速度加快, 有其中一個就是為 static file(css, js, 或 image .. 等) 打上很長的過期時間(ex: 10年), 然後只要不按 Ctrl + F5, 那這些檔案瀏覽器是不需要重新再下載一次的, 這樣子 Server 自然省頻寬, Client 瀏覽的速度也會快很多.

我的做法是下述三種:(也算是過程吧, 從 1 -> 2 -> 3)

  1. filename + svn version (用 Apache mod_rewrite 指到 filename)
  2. filename.css 壓縮後, filename + svn version 變成 filename-123.css
  3. filename.css 壓縮後, filename_min + ?v=svn version 變成 filename_min.css?v=123

第一種方法 就跟那篇文章寫的差不多, 基本上就是現在的檔案, 然後前端直接拉 svn version 產生 filename-123.css, 然後不管 filename-***.css, 一律都是 rewrite 到 filename.css, 但是缺點是, 這檔案沒有經過壓縮, 比較耗頻寬.

第二種方法 的缺點是, 如果我 push 完後, 別人是點選 Search engine 的 Cache 功能, 那就會抓到舊的 filename-123.css, 但是這個檔案, 我通常是壓縮完另外產生的, 所以並不在 svn 裡面, 因此只要有新版的 push, 那這個檔案就消失了, 自然就抓不到此 css.

最後採取的是第三種做法, 就是把 filename.css 先壓縮後產生 filename_min.css, 然後前端去噴 ?v=svn version, 這樣子使用 Search engine Cache 進來, 一樣可以拉到 filename_min.css(只是 ?v= 後面參數不一樣), 後面的參數不同, 瀏覽器就會認為是一個新的檔案, 就會重新抓取, 這樣子自然就把前面的所有狀況都處理掉囉~

結論就是, 這個要做自動化還真麻煩, 基本上那篇文章早點寫出來, 就可以省掉不少時間~(不管是哪種方法, 基本要寫的東西都差不多, 只是 呈現 與 操作 上的不同罷了) .. XD

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料