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

#vue單頁面應用，經常會遇到首頁加載過慢的狀況

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

  vue項目中配置方法:config/index.js

     固然不要忘記下載上面提示的插件:

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>複製代碼