存在3個環境,dev,test,prod
針對每個環境有不一樣的config,其中dev為config.dev.js,test為config.test.js,prod則直接采用conf.default.js
其中:
1. 在dev和test下運行服務,前端獲取到js、css等靜態文件時,Request Headers沒有Cache-Control,或者存在時max-age=0
2. 在prod下運行的服務,Cache-Control為public max-age=31536000
對於prod環境,如果不主動給js、css等添加版本管理,這些文件的緩存時間將為1年,當更新任意文件后,瀏覽器會Cache-Control的存在,選擇從 memory cache 或者 disk cache中讀取,導致無法更新某些靜態資源,必須通過ctrl+F5這種操作來更新。
PS:未使用CDN
查看eggjs的官網,查看關於靜態資源的說明,使用了static。
查看api中static的配置,默認如下:
注意:
雖然此處寫着maxAge的默認值為0,但是實際上,查看egg-static在github中的說明會發現
Cache-Control,在prod環境下,l為public max-age=31536000,其他環境下,為max-age=0
而Egg在運行環境中,也有如下說明:
故而,在prod環境中,未指定任何EGG_SERVER_ENV時,框架自動設置該值為prod,導致egg-static讀取prod env下的配置。
此時,通過在config中配置static即可解決問題
但是這樣配置,會導致,所有靜態資源都將跟服務器請求,頁面將變慢,解決方案:
1. 使用版本號,打包靜態資源,並使用開啟static,這樣,如果在瀏覽器有緩存,則不向服務器請求,這種情況下,速度最快。
PS:使用CDN也是通過cache-control來判斷緩存,如果使用CDN也需要主動管理靜態資源的版本,來保證靜態資源能夠按需更新
2. 使用etag,這種情況下,靜態資源在瀏覽器有緩存,但是,每一次都會跟服務器判斷,相同時返回304讀取緩存,不同時返回資源,並刷新緩存
此時,使用egg-etag即可,安裝egg-etag后,在plugins和config.default.js中配置即可。