現(xiàn)在很多web應(yīng)用都是使用Vue迎瞧、React等框架開發(fā)的，這種SPA單頁(yè)面應(yīng)用在打包后逸吵，有些文件比較大凶硅。因此，大部分公司在生產(chǎn)環(huán)境會(huì)使用CDN加速扫皱，來加快首頁(yè)渲染速度足绅。
但是使用CDN后靜態(tài)文件會(huì)有緩存，重新打包上線后韩脑，可能不會(huì)立即更新修改的地方氢妈。瀏覽器上可以使用Ctrl + Shift + R強(qiáng)制清理緩存，但是手機(jī)上清理緩存就很麻煩段多。再說這種清理緩存的方式對(duì)用戶來說極度不友好首量，所以需要在Nginx中配置相應(yīng)的緩存策略。
Nginx & CDN Cache
配置Nginx
打開 nginx.conf 配置文件，編輯對(duì)應(yīng)的server加缘，加上下面的控制緩存策略代碼：
server {
listen 8088;
server_name localhost;
location / {
root /data/www/web-test;
index index.html;
try_files $uri $uri/ /index.html;
# 控制緩存策略代碼 start
# code-1
if ($request_filename ~ .*\.(htm|html)$) {
add_header Cache-Control 'no-store, no-cache, must-revalidate';
}
# code-2
if ($request_filename ~ .*.(js|css)$) {
expires 30d;
}
# 控制緩存策略代碼 end
}
}
-
code-1： 這段代碼的含義是不緩存
html入口頁(yè)鸭叙，每次都重新從服務(wù)端拉取最新的文件。 -
code-2： 這個(gè)是匹配找到所有的
js拣宏、css文件沈贝，讓其加上 30天 的緩存。
配置成功后勋乾，執(zhí)行 nginx -s reload 重啟nginx宋下，應(yīng)該就大功告成了。
《Nginx學(xué)習(xí)與實(shí)戰(zhàn)》系列
- Nginx學(xué)習(xí)與實(shí)戰(zhàn) · 配置HTTP2
- Nginx學(xué)習(xí)與實(shí)戰(zhàn) · 解決net::ERR_CONTENT_LENGTH_MISMATCH 206問題
- Nginx學(xué)習(xí)與實(shí)戰(zhàn) · 解決SPA單頁(yè)面應(yīng)用CDN緩存問題（本文）
歡迎訪問：天問博客
