nginx 部署前端資源的最佳方案

前言

最近剛來一個運維小夥伴,做線上環境的部署的時候,前端更新資源後,總是需要清緩存才能看到個更新後的結果。客戶那邊也反饋更新了功能,看不到。

方案

前端小夥伴應該都知道瀏覽器的緩存策略,協商緩存和強緩存,如有不清楚的地方,可以看看這篇文章[聊聊瀏覽器緩存] (https://juejin.cn/post/7055224159642583047)。

現在比較流行的是單頁應用。瞭解了瀏覽器的緩存之後,在常見的web開發中我們應該怎麼設置呢。現在大多數的應用是通過webpack打包的,打包生成的資源名稱會帶上hash值。下面是打包後的文件

image.png

我們可以遵循之下規則

  • 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、關注公衆號「前端有話說」,裏面已有多篇原創文章,和開發工具,歡迎各位的關注,第一時間閱讀我的文章

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章