# 3. gzip 壓縮提升網站性能
#### 1. 介紹
網站開發到一定程度，可能css文件或js文件會越來越大，因為有可能加載了很多的插件。這個時候如果能把這些文件壓縮一下就好了。
nginx就支持這種功能，它可以把靜態文件壓縮好之后再傳給瀏覽器。瀏覽器也要支持這種功能，只要瀏覽器的請求頭帶上`Accept-Encoding: gzip`就可以了。假如有一個文件叫application.css，那nginx就會使用gzip模塊把這個文件壓縮，然后傳給瀏覽器，瀏覽器再解壓縮成原來的css文件，就能讀取了。
所有的這一切都需要nginx已經有編譯過`ngx_http_gzip_module`這個模塊。這個模塊能對需要的靜態文件壓縮大小，比如圖片，css，javascript，html等。壓縮是需要消耗CPU，但能提高傳縮的速度，因為傳縮量少了許多，從而節省帶寬。
#### 2. 使用
使用之前先來查看一下是否編譯了`ngx_http_gzip_module`這個模塊。
```
sudo nginx -V
```
如果輸出`--with-ngx_http_gzip_module`，說明已經編譯了。沒有的話，可以參考這篇文章[升級centos系統上的nginx](http://www.rails365.net/articles/2015-09-21-sheng-ji-centos-xi-tong-shang-de-nginx)來編譯。
要配置nginx的gzip也很簡單。
```
http {
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
server {
location ~ ^/assets/ {
gzip_static on;
expires max;
add_header Cache-Control public;
}
}
}
```
上面最重要的是http中`gzip on;`還有`gzip_types`這兩行，是一定要寫的。其他的`gzip_vary`等都是一些配置，可以不寫。
然后在需要壓縮的靜態資源那里加上下面三行。
```
gzip_static on;
expires max;
add_header Cache-Control public;
```
改了配置用`sudo nginx -s reload`重新加載生效。
#### 3. 測試
要測試可以使用瀏覽器，比如chrome。
只要用開發者的network功能查看兩次資源的大小就好了。比如：
在壓縮前：
壓縮后：
或者使用curl工具也可以。
```
~/codes/rails365 (master) $ curl -I -H "Accept-Encoding: gzip" http://www.rails365.net/assets/application-7166fb1597da14300423c6a60c281a45f24573b249eafe0fd84b5c261db1d3a5.js
HTTP/1.1 200 OK
Server: nginx/1.8.0
Date: Tue, 20 Oct 2015 10:44:52 GMT
Content-Type: application/x-javascript
Last-Modified: Tue, 20 Oct 2015 09:36:44 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: W/"56260b2c-22b41"
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Cache-Control: public
Content-Encoding: gzip
```
只要返回`Content-Encoding: gzip`說明成功的。
完結。
