vue-cli 啟動gzip壓縮，及後臺配置

mushang發表於2018-06-07
Vue

#vue單頁面應用，常常會遇到首頁載入過慢的情況

  vue-cli中只需開啟gzip壓縮，會將原來的程式碼再次壓縮50%以上

  vue專案中配置方法:config/index.jsvue-cli 啟動gzip壓縮，及後臺配置

     當然不要忘記下載上面提示的外掛:

npm install --save-dev compression-webpack-plugin
複製程式碼

#後臺配置方法

 ## Nginx開啟gzip

    找到nginx.config。關於gzip壓縮程式碼

http {gzip on; #開啟或關閉gzip on off
 gzip_disable "msie6"; #不使用gzip IE6
 gzip_min_length 100k; #gzip壓縮最小檔案大小，超出進行壓縮（自行調節）
 gzip_buffers 4 16k; #buffer 不用修改
 gzip_comp_level 3; #壓縮級別:1-10，數字越大壓縮的越好，時間也越長
 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  壓縮檔案型別
 gzip_vary off;  #跟Squid等快取服務有關，on的話會在Header裡增加 "Vary: Accept-Encoding"
}複製程式碼

gzip使用環境:http,server,location,if(x),一般把它定義在nginx.conf的http{…..}之間

  • gzip on
    on為啟用，off為關閉
  • gzip_min_length 1k
    設定允許壓縮的頁面最小位元組數，頁面位元組數從header頭中的Content-Length中進行獲取。預設值是0，不管頁面多大都壓縮。建議設定成大於1k的位元組數，小於1k可能會越壓越大。
  • gzip_buffers 4 16k
    獲取多少記憶體用於快取壓縮結果，‘4 16k’表示以16k*4為單位獲得
  • gzip_comp_level 5
    gzip壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值;
  • gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php
    對特定的MIME型別生效,其中'text/html’被系統強制啟用
  • gzip_http_version 1.1
    識別http協議的版本,早起瀏覽器可能不支援gzip自解壓,使用者會看到亂碼
  • gzip_vary on
    啟用應答頭"Vary: Accept-Encoding"
  • gzip_proxied off
    nginx做為反向代理時啟用,off(關閉所有代理結果的資料的壓縮),expired(啟用壓縮,如果header頭中包括"Expires"頭資訊),no-cache(啟用壓縮,header頭中包含"Cache-Control:no-cache"),no-store(啟用壓縮,header頭中包含"Cache-Control:no-store"),private(啟用壓縮,header頭中包含"Cache-Control:private"),no_last_modefied(啟用壓縮,header頭中不包含"Last-Modified"),no_etag(啟用壓縮,如果header頭中不包含"Etag"頭資訊),auth(啟用壓縮,如果header頭中包含"Authorization"頭資訊)
  • gzip_disable msie6
    (IE5.5和IE6 SP1使用msie6引數來禁止gzip壓縮 )指定哪些不需要gzip壓縮的瀏覽器(將和User-Agents進行匹配),依賴於PCRE庫

以上程式碼可以插入到 http {...}整個伺服器的配置裡，也可以插入到虛擬主機的 server {...}或者下面的location模組內

 ## node端

    只要加上compress模組即可，程式碼

var compression = require('compression')
var app = express();

//儘量在其他中介軟體前使用compression
app.use(compression());// 這是基本用法，如果還要對請求進行過濾的話，還要加上app.use(compression({filter: shouldCompress}))

function shouldCompress (req, res) {
  if (req.headers['x-no-compression']) {
    // 這裡就過濾掉了請求頭包含'x-no-compression'
    return false
  }

  return compression.filter(req, res)
}複製程式碼

##tomcat

   tomcat的配置如下

找到tomcat的server.xml檔案，找到其中Connector節點然後進行配置修改，具體配置如下

<Connectorport="80"protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" maxPostSize="0" useBodyEncodingForURI="true"compression="on" compressionMinSize="2048"noCompressionUserAgents="gozilla, traviata"compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,image/jpeg,application/json"/>複製程式碼

引數說明：

  • compression="on" 開啟壓縮功能
  • compressionMinSize="2048" 啟用壓縮的輸出內容大小，當被壓縮物件的大小>=該值時才會被壓縮，這裡面預設為2KB
  • noCompressionUserAgents="gozilla, traviata" 對於以下的瀏覽器，不啟用壓縮
  • compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" 壓縮型別

注意：tomcat7以後，js檔案的mimetype型別變為了application/javascript，而在tomcat7以下則為text/javascript;具體的tomcat7定義的型別可以在：conf/web.xml檔案中找到。

可以在web.xml下搜尋，如我搜尋javascript會找到如下程式碼

<mime-mapping>
    <extension>js</extension>
    <mime-type>application/javascript</mime-type>
</mime-mapping>複製程式碼


相關文章