前言
最近剛來一個運維小夥伴,做線上環境的部署的時候,前端更新資源後,總是需要清緩存才能看到個更新後的結果。客戶那邊也反饋更新了功能,看不到。
方案
前端小夥伴應該都知道瀏覽器的緩存策略,協商緩存和強緩存,如有不清楚的地方,可以看看這篇文章[聊聊瀏覽器緩存] (https://juejin.cn/post/7055224159642583047)。
現在比較流行的是單頁應用。瞭解了瀏覽器的緩存之後,在常見的web開發中我們應該怎麼設置呢。現在大多數的應用是通過webpack打包的,打包生成的資源名稱會帶上hash
值。下面是打包後的文件
我們可以遵循之下規則
index.html
入口文件不加強制緩存,設置成協商緩存js 資源
在線上環境可以設置成強緩存。
因爲我們每次打包之後,入口文件會有變化,所以協商緩存會失效,會重新從服務器獲取新的資源。而對應的js資源有hash的變化,所以有變化,會從服務器中獲取。
nginx配置
nginx 非根目錄部署(root要換成alias
)。
要設置html,htm類型的文件走協商緩存,其它js文件走強緩存,我們可以這樣配置。
#設置某個類型的文件走協商緩存
if ($request_filename ~* .*\.(?:htm|html)$) {
add_header Cache-Control 'no-cache';
}
整體配置
location /page/appAnalyze {
try_files $uri $uri/ /index.html last;
alias /usr/*******/dist;
index index.html index.htm;
#設置某個文件不緩存讀取本地,永遠走200,拿到最新的
if ($request_filename ~* .*\.(?:htm|html)$) {
add_header Access-Control-Allow-Credentials false;
add_header Access-Control-Allow-Origin $http_origin;
# header上添加協商緩存
add_header Cache-Control 'no-cache';
# 表示請求頭的字段 動態獲取
add_header Access-Control-Allow-Headers
$http_access_control_request_headers;
}
結束語
小夥伴可以看看你們的項目緩存是不是這樣部署的呢,如果不是,可以加上這些配置。你的網站性能也會提升一點點哈。
如果你覺得該文章不錯,不妨
1、點贊,讓更多的人也能看到這篇內容
2、關注我,讓我們成爲長期關係
3、關注公衆號「前端有話說」,裏面已有多篇原創文章,和開發工具,歡迎各位的關注,第一時間閱讀我的文章