最近疫情，著實無聊。簡單總結點東西，打發時間。

這篇文章主要記錄如何在tomcat或nginx中配置前端靜態資源的緩存策略，力求簡潔明了，不參雜其他無關配置項。

壓縮

對于HTTP的壓縮，是一種使用CPU時間來換取網絡傳輸時間的技術。在現有網絡環境下，CPU所消耗的時間遠遠小于網絡傳輸所使用的時間。因此，如果服務器的CPU尚有盈余，則開啟壓縮是有益無害的。

靜態資源

對于靜態資源，有兩種開啟壓縮的方式，一種是compress in time，另一種是precompression，下面有張圖對比了這兩種方式的異同。對于第二種，因為靜態資源已經提前進行了壓縮處理，當HTTP請求到達之后，可以直接響應已經壓縮過的文件，所以可以節約服務器的CPU。因此，下面重點介紹如何針對第二種方式進行配置。

CompressionWebpackPlugin

首先，我們需要構建出被壓縮過的靜態資源，這里可以借助CompressionWebpackPlugin來達成我們的目的。配置如下：

new CompressionPlugin({test: /.js$|.css$|.html$|.json$/, // 對哪些資源進行壓縮threshold: 8192, // 超過多大的資源會被壓縮，單位bytesminRatio: 0.8, // 壓縮過后體積減少到80%以下的文件會被壓縮 })

Nginx

如果你們使用的nginx作為靜態資源服務器，可以簡單在nginx.conf中的location區塊中加上gzip_static on;就可以了。這個配置項主要是告訴nginx，如果客戶端可以接收gzip過的文件，那么就尋找以.gz結尾的文件，如果存在，就返回它。是不是簡單地超乎想象呢？

Tomcat

如果你們使用的tomcat作為服務器，情況稍微有點復雜，但也不困難。首先，如果你的tomcat版本>=8，那么你可以在web.xml中的DefaultServlet中加上這幾行：

<servlet><servlet-name>default</servlet-name><servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>...<init-param><param-name>gzip</param-name><param-value>true</param-value></init-param>...</servlet>

這個配置的效果也是讓tomcat去尋找.gz結尾的文件，如果客戶端支持，就返回它。

如果你使用的tomcat>=9，而且想使用其他壓縮算法的話，可以在同樣的位置設置這個變量precompressed。它的值可以是br=.br,gzip=.gz,bzip2=.bz2。這個配置項告訴tomcat，若客戶端能夠接受被br壓縮過的內容，那么返回以.br結尾的對應文件，以此類推。

API請求

對于API請求，因為其易變的特性，我們一般采用即時壓縮的方式。那么，如果簡單開啟壓縮呢，這里依舊分為nginx和tomcat兩塊來分開講解。

Nginx

你可以將下面的配置簡單定制后放在http區塊里就可以了。

gzip on; # 開啟gzip壓縮 gzip_types application/json; # 對什么類型的資源進行壓縮，因為API請求一般是json的，這里可以只配置json，具體需要根據情形來確定 gzip_min_length 8192; # 長度太短的話，壓縮沒有意義，單位是bytes

tomcat

tomcat的配置原理和nginx大致相同，只是屬性名字有些區別，這個配置在server.xml中。

<Connector ...compression="on" # 開啟壓縮，也可以是個代表壓縮等級的數字，0-9compressibleMimeType="application/json" # 對什么類型的資源進行壓縮compressionMinSize="8192" # 長度大于多少進行壓縮，單位是bytes/>

緩存

緩存的配置一般多用于靜態資源，對于API請求極少使用這一層級的緩存。這里只列舉對于前端性能有幫助的配置。

緩存的原理

通俗來講，靜態資源的緩存通過HTTP頭讓客戶端和服務器互通有無的過程。這事得從第一次說起，首先，客戶端會向服務器要文件，服務器就返回了，順便，服務器可以選擇告訴客戶端，這個文件的ETag（哈希）是什么，什么時候創建的，你可以緩存多長時間?？蛻舳丝梢愿鶕@些信息制定自己的策略。當這件事第二次發生的時候，客戶端就可以告訴服務器，我這邊有緩存，你看，這是文件的ETag，上次修改發生在什么時候，我是否希望使用本地的緩存。這時，服務器可以告訴客戶端，你可以繼續使用，或返回新的文件。

這個過程簡單來說是這樣，但實際情況要稍微復雜一些，這里不再贅述。具體一點的話，大家可以參考這里，https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching。

Nginx

Nginx的緩存策略分為兩步。第一步，解決什么類型的資源緩存多長時間的問題。第二步，解決哪些位置的資源應用第一步中的策略問題。

第一步，將不同類型的MIME-TYPE映射到不同的緩存時間上，并存儲在變量$expires中，示例：

map $sent_http_content_type $expires {default off;# No content"" off;~*application/javascript 1y; }

第二步，對跟路徑應用該緩存，示例：

location / {root $h5;expires $expires; }

Tomcat

在Tomcat中，情況也是類似的，只是叫法不一樣。Tomcat中使用org.apache.catalina.filters.ExpiresFilter過濾器來控制緩存。同樣也是兩步走，第一步，通過過濾器解決什么類型的資源緩存多長時間的問題。第二步，解決哪些位置的資源應用該過濾器的問題。

第一步，配置過期過濾器ExpiresFilter。這里只配置了JavaScript，大家根據自己的實際情況進行配置。和nginx中的$expire一樣，這里的過濾器名字可以隨意取（但要表意），示例：

<filter><filter-name>ExpiresFilter</filter-name><filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class><init-param><param-name>ExpiresByType application/javascript</param-name><param-value>access plus 1 year</param-value></init-param> </filter>

第二步，應用該過濾器。注意，filter-name要和上面的匹配，要不然就起不了效果，示例：

<filter-mapping><filter-name>ExpiresFilter</filter-name><url-pattern>/*</url-pattern><dispatcher>REQUEST</dispatcher> </filter-mapping>

總結

這里只列舉了比較常用的兩種?？梢钥吹?#xff0c;這兩種的服務器配置方式非常相似，對于其他類型的服務器而言，也是大同小異的，具體可以參考這里，https://github.com/h5bp/server-configs。希望看完本篇文章的小伙伴能夠有所收獲，也希望大家的前端頁面能夠快的飛起。

總結

以上是生活随笔為你收集整理的nginx 开启gzip 配置js_前端性能优化之缓存与GZIP的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。