2011-08-23 33 views
7

我正在使用JSF Web應用程序。每當我更改CSS文件並首次部署該程序時,CSS文件中的更改都不會反映出來。我在不同的情況下測試了它。這是如何造成的,我該如何解決這個問題?部署後CSS文件中的更改未被反映

+2

要排除一個又一個,當你按下Ctrl + F5在瀏覽器中做他們加載? – BalusC

+0

是的,當我按Ctrl + F5它被加載 – qazal

+0

是的,當我按Ctrl + F5它被加載。在這種情況下,最後的CSS仍然是瀏覽器現金。我怎樣才能解決這個問題與兌現? – qazal

回答

12

是,當我按下Ctrl + F5在加載

然後把它剛剛從瀏覽器緩存中。這很好。它可以在實際生產環境中節省網絡帶寬。但我可以想象,這在開發過程中或每次將更新引入生產時都會令人不安。在開發過程中,我只是學會習慣Ctrl + F5鍵。但是對於生產你真的想解決這個問題,因爲最終用戶可能不知道這個「訣竅」。

一種常用的方法是將一個版本號作爲請求參數附加到CSS資源。

<link rel="stylesheet" href="style.css?v=1.0" /> 

每當您對CSS進行重大更改時,您都希望在將更新引入生產之前增加版本號。

<link rel="stylesheet" href="style.css?v=1.1" /> 

這將強制瀏覽器重新加載樣式表。

另一種方法是使用服務器的啓動時間。在使用JSF時,可以通過在faces-config.xml中聲明爲應用程序範圍的託管bean來輕鬆完成此操作。

<managed-bean> 
    <description>Startup date</description> 
    <managed-bean-name>startup</managed-bean-name> 
    <managed-bean-class>java.util.Date</managed-bean-class> 
    <managed-bean-scope>application</managed-bean-scope> 
</managed-bean> 

然後你可以使用Date#getTime()獲得時間戳:

<link rel="stylesheet" href="style.css?#{startup.time}" /> 

這將生成到HTML這樣的:

<link rel="stylesheet" href="style.css?1314105929937" /> 

它會改變你每次重新啓動服務器或重新部署webapp,所以瀏覽器將被迫重新加載資源(甚至當它實際上沒有被改變時!記住這一點,如果緩存和帶寬使用是一個關注N)。同樣的技術適用於其他靜態資源,如JavaScript和圖像。

當您已經使用JSF 2.x時,您可以使用內置的「資源庫版本控制」功能。另請參見What is the JSF resource library for and how should it be used?

+0

非常感謝您的解決方案 – qazal

+0

+1有用的技巧,謝謝BalusC。也許你應該在一本書中編譯你的答案(如果你應該有一些空閒時間)。我會買它:) – kostja

+0

不錯的主意,但是有沒有機會將這與JSF包含CSS文件的方式結合起來,即用'?'結合? –

0

我在更改css文件並需要刷新網站時遇到了同樣的問題,非常漂亮並且非常不方便。

最終我遇到了這個漂亮的小工具,一個JavaScript文件,你需要在你的項目中實現它。 因爲你不需要刷新網站,你只需要保存你的css文件,這些更改將在2,3秒後自動被採用。

這裏是鏈接:http://cssrefresh.frebsite.nl/

順便說一句,從BalusC非常有用的技巧,一如既往;)

+0

我試圖用你說的方式,但不適合我。我下載了js文件並將其放入我的項目中,但沒有影響:( – Aditzu